Abfrage dynamisches Formularfeld

[Felix Riesterer]

Lieber Florian,

ergänzend zu allen meinen Vorrednern möchte ich Dir vorschlagen, dass Du Deine Feldnamen nummerierst. So könnte ingredient-1 der ID-Wert der ersten Zutat sein. Serverseitig wirst Du eben alle $_POST-Schlüssel mit dem „Vornamen“ ingredient- auswerten und dem Rezept zuordnen müssen. Du kannst die jeweilige Nummer entweder ignorieren, oder die Reihenfolge sogar beherzigen.

Clientseitig genügt es, wenn Du genau einen Button verwendest, der für das Hinzufügen einer neuen Zutat verwendet wird:

<ul>
  <li>
    <label for="ingredient-1">
      Zutat
      <input name="ingredient-1" id="ingredient-1" type="text">
    </label>
  </li>
  <li>
    <button id="add-ingredient">Zutat hinzufügen</button>
  </li>
</ul>

Die Funktion zum Hinzufügen einer Zutat klont das erste <li>, ändert die Attribute for, name und id gemäß einer Zählervariablen in Deinem Script und hängt sie vor dem letzten <li> in der Liste ein. Das geht mit ulNode.insertBefore(newNode, existingNode).

Für den User bedeutet das, dass er bei Betätigen des Buttons genau vor diesem eine neue Zeile mit einer neuen möglichen Zutat angezeigt bekommt. Dazu braucht er natürlich den Hinweis, dass leere Zutaten ignoriert werden, da Du nur so das Löschen einer Zutat hinbekommst.

Willst Du für die Zutatenliste eine Reihenfolge steuerbar machen, dann braucht es anstelle von ul natürlich ol, sowie passende Buttons bei jedem <li>, welche das Verschieben nach unten und oben ermöglichen. Hier bietet es sich an, dass man den jeweiligen Button via CSS auf display:none setzt, wenn es sich um die letzte bzw. erste Zutat handelt. Diese Buttons sollten dann lediglich dafür sorgen, dass die Textinhalte der Textinputs ausgetauscht werden, denn sonst müsstest Du tatsächlich die Listenpunkte im DOM umsortieren und dazu passend ihre Attributwerte der Nummerierung gemäß anpassen. Kann man machen, geht auch ganz gut, ist aber deutlich aufwendiger.

Liebe Grüße

Felix Riesterer