Formular mit dynamischen Felder

[Gunnar Bittersmann]

@@lopi02

Weiss jemand was ich falsch gemacht habe?

Du stellst zuviele Fragen.

Ich meine nicht hier, sondern dort: Anstatt zu fragen „Haben Sie Kinder?“ und wenn ja, zu fragen wieviele, kannst du gleich nach der Anzahl fragen und wenn diese größer als 0 ist, weitere Fragen einblenden.

Diese solltest du nicht mit style="display: none" verbergen; dafür wäre das hidden-Attribut da.

Aber nicht im HTML setzen, denn die Felder sollten ja angezeigt werden, wenn JavaScript nicht ausgeführt wird.

Also ausblenden mit JavaScript, wenn das Feld Anzahl der Kinder keinen oder den Wert 0 hat. Dafür fallen mir drei Möglichkeiten ein:

• Du gehst alle Elemente der Klasse ‘1.1’ (die darf auch gerne einen sprechenden Namen bekommen) durch und setzt deren hidden-Eigenschaft auf true.

• Du gruppierst die ein-/auszublendenden Felder in einem div und setzt dessen hidden-Eigenschaft auf true. (Spart die Schleife über alle Elemente der Klasse ‘1.1’.)

• Du speicherst die Informationen „JavaScript wird ausgeführt“ und „Kinder da“ an einem übergeorneten Element (das form-Element bietet sich an) in einer Klasse oder einem data-Attribut und blendest die Felder per Nachfahrenselektor ein/aus:

  bspw. form.js-enabled:not(.children-in-da-house) .\31\.1 { display: none }

  An dem Selektor siehst du, dass der Klassenbezeichner ‘1.1’ keine so gute Idee ist. (Der Selektor ist übrigens richtig. Der Syntax-Highlighter ist kaputt.)

Und was noch falsch ist: die <br>-Elemente. Verwende CSS, um Elemente als Blockelemente anzuzeigen. Oder Markup; <p> bietet sich an.

LLAP 🖖