(Gelöst) HTML Formular um einen Bereich dynamisch erweitern + ID Vergabe

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

ZK_Crunchy

Mitglied
21 Januar 2021
45
0
6
24
Guten Tag zusammen!

Ich habe ein Formular im Rahmen eines kleinen Hochschulprojektes entworfen, welches für eine Reisekostenabrechnung genutzt wird. Dieses Formular wurde in erster Linie nur funktionell erstellt. Deshalb überarbeite ich dieses nochmal.

Ich bin dazu übergegangen die Funktion "dynamisch erweitern" einzubauen - sprich per Knopfdruck erscheint ein weiteres fieldset mit input-Feldern. Soweit so gut. Das dynamische Erweitern klappt auch so, wie ich mir das gedacht habe. Jedoch werden die Inputs von einer von uns programmierten Softwarelösung ausgelesen. Daher müssen die Inputfelder verschiedene IDs besitzen. Wenn ich aktuell das fieldset dynamisch erweitere werden die GLEICHEN IDs vergeben. Und so ist das NICHT gedacht. Die IDs sollten [ID] + 1 sein. Also bei jedem erweitern, wird die ID um 1 erhöht. Nur habe ich leider keine Idee wie das umsetzen soll und daher melde ich mich hier bei Euch.

Ich hoffe Ihr könnt mir auf die Sprünge helfen!


Einen Lieben Gruß


P.S.: Anbei ist eine Textdatei mit dem HTML Code.
 

Anhänge

  • HTML Code.txt
    8,8 KB · Aufrufe: 6
Werbung:

linuxuser24

Neues Mitglied
20 Januar 2021
10
2
1
21
Hi,
wenn ich es richtig verstanden habe brauchst du eine ID, die 2mal vergeben werden kann.
Wenn ja: schreib statt
HTML:
<input type="text" id="id">

das:
HTML:
<input type="text" class="klasse">
du musst aber in css "." statt "#" nehmen.

linuxuser24
 

ZK_Crunchy

Mitglied
21 Januar 2021
45
0
6
24
Ah, okay. Das heißt, dann kann ich in css eine Klasse schreiben, die die ID um eine Zahl erhöht. Super. Das werde ich testen und berichten!

Vielen Dank schon Mal ! :)
 
Werbung:

jonas3344

Aktives Mitglied
25 Oktober 2019
104
31
28
37
Darf ich sagen, dass Dein HTML grässlich ist und dass man irgendwo im Jahr 2005 Webseiten so gebaut hat?

Lass Dir Dein Resultat mal validieren, das fliegt Dir um die Ohren. Viele Sachen sind deprecated, also nicht mehr im Standard enthalten.

Und valides HTML ist halt schon die Basis für alles.

Zu Deiner Frage. Elemente müssen sogar unterschiedliche IDs haben.
Ich glaube nicht, dass es da einen einfachen, schnellen Weg gibt. Du wirst zuerst klonen müssen, dann durch alle Child-Elemente durchgehen müssen und die ID um eins hochzählen müssen.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.263
449
83
68
Das heißt, dann kann ich in css eine Klasse schreiben, die die ID um eine Zahl erhöht. Super. Das werde ich testen und berichten!
Auf den Bericht bin ich gespannt, denn hier sind die Erwartungen an eine Klasse zu hoch gesetzt :smile:
 

ZK_Crunchy

Mitglied
21 Januar 2021
45
0
6
24
@jonas3344 Das darfst du natürlich sagen. Ich bin angehender Wirtschaftsinformatiker und habe somit nur theoretische Kenntnisse über den Aufbau einer Website. Habe mich dennoch mal dran versucht. Für Verbesserungsvorschläge bin ich immer offen. Was genau ist denn veraltet bzw nicht mehr zeitgerecht? Dann kann ich das in Zukunft anpassen. Mich erwarten noch weitere Formulare. Meine bisherigen HTML Kenntnisse habe ich mir aus Guides oder Videos entnommen. Dazu muss ich auch sagen, dass dies keine Website werden soll, sondern ein einfaches Formular, welches in eine Softwarelösung eingelesen wird.

@Sempervivum Ja, das mag gut sein. Aber solange die paar Zeilen Code den Zweck erfüllen bin ich glücklich.
 
Werbung:

jonas3344

Aktives Mitglied
25 Oktober 2019
104
31
28
37
@linuxuser24
Klassen sind hier total sinnfrei, weil er die Felder ja eindeutig identifizieren muss. Das geht nicht (ausschliesslich) über eine Klasse.

So ganz grob (wie gesagt, validieren lassen, das sagt auch noch viel):
- Tabellen braucht man nicht mehr zum Layouten. Es gibt Flexbox und CSS Grid. Formulare lassen sich sehr schön mit Flexbox lösen.
- Das action-Attribut bei <form> darf nicht leer sein. Für ein Affenformular lass es weg.
- Alle Attribute für Tabellen (width, border, bgcolor, etc.) sind deprecated und sollten nicht mehr verwendet werden. Löse das über CSS:
- <font> ist veraltet.
- Abstände sollte man mit margin lösen, nicht mit &nbsp;
- Anstelle <input type="button"> sollte man <button>-Elemente verwenden.

Die Guides aus welchen du das hast solltest du in die Tonne kloppen. ;)
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.263
449
83
68
@ZK_Crunchy Zu deiner eigentlichen Frage: Hier würde es sich anbieten, statt einem verborgenen div eine Vorlage zu verwenden mit Platzhalten, die dann durch Javascript ersetzt werden.
Die Vorlage würde dann so aussehen:
Code:
            <template id="new_passage">
                <fieldset style="width: 900;" class="Feld3">


                    <table width="900" border="0">
                        <tr bgcolor="31759C">
                            <td>
                                <font size="5" face="Arial"><b>Reisetag 1:</b></font>
                            </td>
                        </tr>
                    </table>
                    <table border="0">
                        <tr>
                            <td width="225px">
                                <font face="Arial">
                                    Datum:
                                </font>
                            </td>
                            <td width="225px">
                                <input id="datum{{nrtag}}" type="date" style="border:1">
                            </td>
                            <td width="225px">
                                <font face="Arial">
                                    Uhrzeit:
                                </font>
                            </td>
                            <td width="225px">
                                <input id="uhrzeit{{nrtag}}" type="time" style="border:1">
                            </td>
                        </tr>
                        <!-- usw. -->
</template>
Die Nummer des Tages führst Du als eine globale Variable und diese Platzhalter in den doppelten geschweiften Klammern ersetzt Du dann mit Javascript durch den Inhalt dieser Variablen. Sieh dir dazu die JS-Funktion replace() an.
 

ZK_Crunchy

Mitglied
21 Januar 2021
45
0
6
24
@Sempervivum

Vielen Dank für deine Antwort und die Mühe! :)
Ich werde mich damit morgen auseinander setzen. Heute finde ich leider nicht mehr die Zeit dazu.

@jonas3344 Danke auch dir für das hervorheben. Das werde ich für die nächsten Formulare ich Hinterkopf behalten und umsetzen. Dieses Formulare soll, sobald es richtig dynamisch erweitert werden kann, ausreichen. Auch wenn es nicht perfekt umgesetzt ist.
 
Werbung:

ZK_Crunchy

Mitglied
21 Januar 2021
45
0
6
24
@Sempervivum

Sorry für die späte Rückmeldung. Also, wenn ich das div als template definiere funktioniert leider das kopieren nicht mehr. Ich habe es jetzt ungefähr so versucht, wie du es auch beschrieben hast.
Die IDs sehen jetzt so aus: <input id="datum{{nrtag}}" type="date" style="border:1">.
So kann ich nun also mit der replace() methode den Platzhalter nrtag durch eine Nummer ersetzen lassen.

Die Funktion sieht aktuell so aus:

<script>
function idErhoehen() {
const number = 2;

console.log(nrtag.replace(nrtag, number));
number++;
}

</script>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.263
449
83
68
wenn ich das div als template definiere funktioniert leider das kopieren nicht mehr.
Das Template ist ja nur HTML, Du brauchst nur den Text zu ersetzen und es mit insertAdjacentHTML dem Container hinzuzufügen.

Und die Variable number muss global sein, sonst fängst Du jedes Mal beim Aufruf der Funktion wieder mit 2 an.

Das Ersetzen dann etwa so:
Code:
document.getElementById('id-des-templates')
    .innerHTML.replace('{{nrtag}}', number);
 
  • Like
Reaktionen: ZK_Crunchy
Werbung:

ZK_Crunchy

Mitglied
21 Januar 2021
45
0
6
24
Aktueller Stand sieht nun so aus:

<script>
const number = 2;

function idErhoehen() {

document.getElementById('new_passage')
.innerHTML.replace('{{nrtag}}', number);

number++;
}

</script>

<script>
//<!--
function myMehrButton(){
var h = document.getElementById("new_passage");
h.insertAdjacentElement("beforebegin", "Reisetag/e");
}


//-->
</script>

<template id="new_passage">

<fieldset style="width: 900;" class="Feld3" name="new_passage">

<table width="900" border="0">
<tr bgcolor="31759C"><td>
<font size="5" face="Arial"><b>Nächster Reisetag:</b></font>
</td></tr>
</table>

.....

</template>

<input value="mehr" onclick="myMehrButton" onclick="idErhoehen" type="button"></input>

Nur bleibt leider das gewünschte Ergebnis aus. Das Kopieren alleine funktioniert nicht mehr. Irgendwo versteck sich dort ein Fehler, den ich offensichtlich übersehe.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.263
449
83
68
Kein Grund, zwei Funktionen zu verwenden, fasse beides zusammen.
Beim replace hatte ich oben nicht bedacht, dass man ja alle Vorkommen des Platzhalters ersetzen muss. Daher muss man eine Regex verwenden.
Damit die Funktion auch ausgeführt wird, musst Du sie mit Klammern notieren.
Dies funktioniert bei mir:
Javascript:
    <script>
        let nrDay = 0;
        function newDay(addBtn) {
            // Nummer des Tages erhoehen
            nrDay++;
            // HTML aus dem Template lesen
            let html = document.getElementById('new_passage').innerHTML;
            // Alle Vorkommen des Platzhalters durch Nummer des Tages ersetzen
            html = html.replace(/\{\{nrtag\}\}/g, nrDay);
            // Das resultierende HTML am Ende des Formulars einfuege
            document.querySelector('form').insertAdjacentHTML('beforeend', html);
            // Button wieder an das Ende schieben
            document.querySelector('form').append(addBtn);
        }
    </script>
HTML:
            <input id="moreBtn" value="mehr" onclick="newDay(this);" type="button">
 
  • Like
Reaktionen: ZK_Crunchy

ZK_Crunchy

Mitglied
21 Januar 2021
45
0
6
24
Funktioniert einwandfrei. Ich danke Dir viel Mals!!!
Immer schnelle und perfekte Antworten auf Lager.

Dir schulde ich auf jeden Fall ein Bier!

Nochmals besten Dank und einen Lieben Gruß.
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.263
449
83
68
Freut mich, dass es funktioniert.
Jetzt möchte ich noch eine kleine Verbesserung vorschlagen: Du hast ja das HTML für den ersten Tag direkt notiert mit der Konsequenz, dass es doppelt vorhanden ist. Diese Redundanz kannst Du vermeiden, indem Du auch den ersten Tag mit der JS-Funktion erzeugst:
Code:
<script>
        let nrDay = 0;
        function newDay(addBtn) {
            // Nummer des Tages erhoehen
            nrDay++;
            // HTML aus dem Template lesen
            let html = document.getElementById('new_passage').innerHTML;
            // Alle Vorkommen des Platzhalters durch Nummer des Tages ersetzen
            html = html.replace(/\{\{nrtag\}\}/g, nrDay);
            // Das resultierende HTML am Ende des Formulars einfuege
            document.querySelector('form').insertAdjacentHTML('beforeend', html);
            // Button wieder an das Ende schieben
            document.querySelector('form').append(addBtn);
        }
        // HTML für den ersten Tag sofort anlegen
        newDay(document.getElementById('moreBtn'));
</script>
Dazu musst Du das Skript am Ende des Body notieren, vor dem schließenden </body> weil sonst der Button und das Formular noch nicht definiert sind.
 

ZK_Crunchy

Mitglied
21 Januar 2021
45
0
6
24
Das ist clever. Werde ich so machen. Wenn ich etwas anpassen möchte, muss ich nicht beide HTML Teile bearbeiten, sondern nur einen. Nicht schlecht.

Nun wir haben ja anfangs festgestellt, dass die Guides auf die ich zurückgegriffen habe, veraltet sind. Gibt es aktuelles Material, welches Ihr mir empfehlen könnt? Ich werde mit den Formular noch etwas arbeiten und würde mich gerade in den Thema Funktionen für HTML gerne noch weiter bilden. Man weiß ja nie, wann man sowas wieder gebrauchen kann.
 
Werbung: