Abfrage dynamisches Formularfeld

[Rolf B]

Hallo Gunnar,

durch die erforderliche ID-Verbindung von Label und Input haben wir aber wieder das Anfangsproblem: Wie vergebe ich automagisch die richtige ID. Aus der Länge der Zutatenliste ableiten kann man sie nicht, weil es ja auch möglich ist, Einträge zu löschen.

Ich frag mich aber, was im Label drinstehen soll. "Zutat" ? Das ist eigentlich albern, denn dann habe ich nachher ein Dokument

und das find ich für sehende User richtig doof.

Ist es machbar, auf die Labels der input Elemente zu verzichten und statt dessen aria-label="Zutat" an's input-Element zu hängen? Wer auf Screenreader angewiesen ist, braucht diese Angabe sicherlich.

Ob das Design mit dem "Hinzufügen" Button hinter jeder Zutat ideal ist, ist eine andere Frage. Eigentlich sollte man ja nur einen Button haben, denn es wird ja immer nur am Ende angefügt. Und man bräuchte eine Umsortierfunktion (up/down Buttons pro Element oder drag+drop).

Ohne Sortierfunktion sähe das bei mir so aus:

<h2>Zutaten</h2>
<button>Zutaten festlegen</button>
<ul class="zutaten">
<li>
  <input value="Hugo" type="text" aria-label="Zutat" name="zutaten[]" width="20">
  <button type="button">Löschen</button>
</li>
</ul>
<button type="button" id="newIngredient">Weitere Zutat</button>
<script>
// Vorlage für neue Rows aus dem ersten Listitem erstellen
const rowTemplate = document.querySelector(".zutaten li").innerHTML;
// Liste der Zutaten 
const ingredients = document.querySelector(".zutaten");
// Click-Handler für neue Zutaten auf den Button legen
document.getElementById("newIngredient").addEventListener("click", function(event) {
   const newItem = document.createElement("li");
   newItem.innerHTML = rowTemplate;
   const newInput = newItem.querySelector("input");
   newInput.value = "";
   ingredients.appendChild(newItem);
   newItem.querySelector("input").focus();
});
// Click-Handler zum Löschen auf die Liste legen, click bubbelt dorthin
ingredients.addEventListener("click", function(event) {
   // event.target ist das geklickte Element, nur auf Buttons reagieren
   if (event.target.tagName != "BUTTON") return;
   event.target.parentElement.remove();
});
</script>

Dazu noch eine Prise CSS für die Liste

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 0.3em;
}

Rolf