Nummerierung bei dynamischen Formular

[Rolf B]

Hallo Jochbart,

ich versuche mal zu beschreiben, was ich davon verstanden habe, was passieren soll.

• Du hast ein Form, mit einer div-Gruppe, bestehend aus einem h2 Heading, ein paar Input-Feldern und einem "Noch eins" Button.
• Klick auf den "Noch eins" Button klont die div-Gruppe, zu der er gehört und hängt den Klon als als letztes Element ins Form.
• Mit relativ mühsamer DOM-Turnerei löschst Du die Eingabefelder im Klon
• dann kommt eine Schleife, die der Variablen "platz" die Werte von "Arbeitsplatz 1" bis "Arbeitsplatz 99" zuweist
• den letzten Wert davon (also Arbeitsplatz 99) weist Du an das Element mit der id "Arbeit" zu. Davon gibt's durch den Klon mittlerweile 2, die Zuweisung erreicht das erste davon
• nun ersetzt du den Text auf dem geklickten Button (und zwar auf dem Original, nicht dem Klon!) durch entfernen
• und registrierst auf ihm eine Function Instanz, die den Original-Node aus dem DOM entfernt.

Einiges davon willst Du sicherlich nicht, anderes ist sehr mühsam umgesetzt und einiges komplett falsch...

1. Füge den input-Feldern, die type=text haben sollen, explizit type='text' hinzu. Vorteil: dann kannst Du sie mit querySelector bzw. querySelectorAll finden.
2. Gib den input-Feldern ein name Attribut, sonst sind die Labels sinnlos (und sie werden beim POST nicht an den Server übertragen)
3. Gib der h2 keine id. Nach dem Clone hast Du die Id mehrfach, das ist also sinnlos.
4. Um das h2 Element zu finden, verwende tmpNode.querySelector("h2"). Aber vielleicht musst Du das auch gar nicht. Siehe ganz unten (CSS Nummerierung)
5. Um die Text-input-Felder zu finden, verwende tmpNode.querySelectorAll("input[type=text]"). Damit bekommst Du eine nodelist, die Du ohne weitere Tests durchlaufen kannst und einfach value der darin befindlichen Nodes auf '' setzt.

Das letzte Problem - Umgang mit den geklonten Buttons - stelle ich noch zurück. Soll der "Noch eins" Button in jedem div stehen? Oder nur im letzten div?

Es wäre ggf. sinnvoller, den "Noch eins" Button aus dem div herauszunehmen und unter das form zu setzen. Den "entfernen" Button sollte man auf jedes div setzen. Es braucht dann nur etwas Logik (bzw einen div:not(:only-of-type) Selektor im CSS), um zu verhindern, dass man den letzten div block löscht.

Das Thema "Nummerieren der DIV-Überschriften" kann man übrigens besser mit CSS Nummerierungen lösen, dann musst Du kein JavaScript dafür bauen.

Wenn Du dein form nachher an PHP posten willst, musst Du die name-Attribute der input-Elemente übrigens mit einem [] ergänzen, damit PHP daraus ein Array macht.

Rolf