Abfrage dynamisches Formularfeld

[Gunnar Bittersmann]

@@Florian C.

ich versuche derzeit in HTML ein Formular zu erstellen

„Derzeit“ heißt seit 10 Jahren? Oder du hattest vor 10 Jahren mal was mit HMTL und JavaScript gemacht und seitdem nicht mehr? Oder – was ich vermute – du verwendest die falschen Quellen im Web.

<script type="text/javascript">

type="text/javascript" ist default, kann also weggelassen werden: <script>

---

<!--

Das Auskommentieren von JavaScript (oder CSS) war vor Urzeiten mal … das ist aber schon länger als 10 Jahre her. Weg damit!

Übrigens fehlten in deinem Code das schließende --> (was natürlich zusammen mit dem öffnenden wegkommt) und auch das schließende </script> (was da sein muss).

---

    tmpNode=objButton.parentNode.cloneNode(true);

Globale Variablen sind i.a.R. keine gute Idee. Das sollte ein lokale sein:

    const tmpNode=objButton.parentNode.cloneNode(true);

(const, weil sich der Wert von tmpNode im weiteren Programmablauf nicht mehr ändert.)

---

    for(j=0;j<objButton.form.lastChild.childNodes.length;++j)

Dito:

    for(let j=0;j<objButton.form.lastChild.childNodes.length;++j)

(let, weil sich der Wert von j mit jedem Schleifendurchlauf ändert.)

Die Codezeile könnte aber etliche Leerzeichen vertragen:

    for (let j = 0; j < objButton.form.lastChild.childNodes.length; ++j)

Wenn du nur über die Elemente iterierst, bietet sich eine for … of-Schleife an:

    for (let node of objButton.form.lastChild.childNodes)

Innerhalb der Schleife dann node statt objButton.form.lastChild.childNodes[j].

Wenn du auch den Index brauchst (z.B. um eine eindeutige ID zu generieren), kannst du die forEach-Methode verwenden:

objButton.form.lastChild.childNodes.forEach(function (node, index) {
    // …
});

was man üblicherweise mit Pfeilfunktion schreibt:

objButton.form.lastChild.childNodes.forEach((node, index) => {
    // …
});

Innerhalb der Schleife dann node statt objButton.form.lastChild.childNodes[j] und index statt j.

---

   <h1>Zutatenliste f&uuml;r <?php echo $Rezeptname; ?></h1>

Das sieht nach einem schwerwiegendem Fehler aus. Wo kommt $Rezeptname her? Nutzergenerierter Inhalt?

Du darfst niemals Nutzereingaben, Datenbankinhalte etc. unbearbeitet in HTML ausgeben. ⚠️ Sicherheitslücke! Immer mit htmlspecialchars() absichern:

   <h1>Zutatenliste für <?php echo htmlspecialchars($Rezeptname); ?></h1>

---

   <button type="button" class="cancelbtn">
   <a href="../">&Uuml;berspringen</button></a>

Abgesehen davon, dass man interaktive Elemente nicht verschachteln darf, stimmt die Verschachtelung an sich nicht. Was in der Reihenfolge <🌞><🌜> geöffnet wird, muss in der Reihenfolge </🌜></🌞> geschlossen werden.

Buttons dienen zur Auslösung von Aktionen auf der Seite; Links (<a href="…">) zum Sprung zu einer anderen Stelle. Um letzteres handelt es sich hier, also:

   <a href="../">Überspringen</a>

Oder wenn den die Styles von .cancelbtn wirken sollen:

   <a href="../" class="cancelbtn">Überspringen</a>

---

   <br><label>Zutaten</label>
   <div>
      <input type="text" size="20" name="EINDEUTIGE_ID"><br>

<br> ist hier unangebracht; verwende CSS zum layouten (bspw. display: block).

Das <label> ist hier nicht besser als ein <span>. Für die explizite Zuordnung zum Eingabefeld müsste es ein for-Attribut haben mit demselben Wert wie das id-Attribut des Eingabefelds (was dann zusätzlich zu name da sein muss).

Oder halt implizit durch Verschachtelung (dedlfix sprach es an), was aber leider nicht immer wirkt.

---

      <input type="button" value="Weitere Zutat hinzuf&uuml;gen" onclick="clone_this(this)">

Verwende <button> für Buttons – aus Gründen.

😷 LLAP