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

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

Z

ZK_Crunchy

Mitglied
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

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
 
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 ! :)
 
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.

The W3C Markup Validation Service

W3C's easy-to-use markup validation service, based on SGML and XML parsers.
validator.w3.org validator.w3.org

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.
 
@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.
 
@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. ;)
 
@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.
 
@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>
 
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.
 
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ß.
 
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.
 
Vielen Dank!

Ich bin seit heute wieder am Formular tätig. Habe nun auch das Erstellen des ersten Reisetags mit in die Funktion übernommen. Nun wollte ich noch ein Fieldset erstellen, indem die Summe der Reisetag aufgeführt wird. Dort ist eine Tabelle vorhanden, in der in jeder Zeile ein Reisetag steht. Wenn man jetzt auf den Button "mehr" klickt, entsteht ja ein neuer Reisetag-Bereich. Dazu würde ich jetzt gerne auch in der Gesamt-Tabelle eine weitere Zeile einfügen lassen, in der dann die Kosten summiert stehen.

Jetzt habe ich folgendes Problem: Nachdem ich ein weiteres Fieldset erstellt habe, wird ein neuer Reisetag (nach klicken auf "mehr") unter dem neuen Fieldset erstellt. Das sind dann so aus:

1611837701400.png

Ich habe versucht in dieser Zeile der Funktion die Position anzupassen, leider ohne Erfolg. Entweder entsteht der neue Bereich ganz unten oder als erstes im HTML Dokument.
1611837729095.png

Vielleicht weiß ja jemand von Euch Rat :).

P.S.: Die Tabelle ist noch nicht fertig. Also bitte nicht meckern :D
 
Sorry für die verspätete Antwort!

Das Script sieht wie folgt aus:

1612008917768.png


Und zwar habe ich einfach das 'form' Argument gegen die IDs des Fieldsets getauscht. Nun wird das neue Fieldset unter dem bestehen erstellt und der Button wieder darunter platziert. Sieht dann in der Praxis so aus:

1612008959284.png
 
Aber wenn ich gerade schon hier bin. Ich versuche gerade die unten zu sehen Tabelle dynamisch zu erweitern. Grund dafür ist, dass ich die einzelnen Reisetage, die oben erstellt werden, unten summiert darstellen möchte. So hat man eine Übersicht der Kosten auf einen Blick.

Ich habe mich versucht verschiedenen Google Funktionen zu bedienen. Leider ohne Erfolg.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben