Web Development

Zeile zu einem Formular hinzufügen

Ohne Javascript sind Web Formulare statisch. Um Eingabelemente hinzuzufügen oder zu löschen braucht man Javascript.

In diesem Beispiel verwenden wir Javascript, um ein Pizza-Bestellformular zu verändern.

Die wichtigsten DOM-Befehle für dieses Beispiel sind cloneNode() und insertBefore(). Mit cloneNode können wir die Kopie eines einzelnen DOM-Knoten oder eines ganzen DOM-Baums erstellen. Dieser Klon ist zuerst einmal nicht Teil des Originaldokuments. Man muss ihn erst wieder einfügen:

let p = document.querySelector("div.pizza");
let new_pizza = p.cloneNode(true);

Eingabeelemente zu clonen ist nicht trivial: jedes Eingabeelement benötigt einen eindeutigen Namen. Es wäre eine Menge Arbeit, um neue Namen für neue Eingabeelemente zu erzeugen. In diesem Beispiel vermeinden wird das mit Hilfe von PHP: PHP kann GET-Parameter als Array behandeln: Wenn wir das Eingabe-Element size nennen, ist sein Wert in in PHP als $_GET['size'] erhältlich und zwar als String. Wenn wir mehrere Eingabeelemente mit dem namen size[] versehen (mit eckigen Klammern als Teil des Namen), sind die Werte all dieser Felder wieder als $_GET['size'] erhältlich, und zwar als Array.

Deswegen sieht eine Zeile des Pizza-Bestellformulars so aus:

<div class="pizza">
  <span class="removethis">x</span>
  <select name="pizzatype[]">
    <option selected="selected">Magaritha</option>
    <option>Vegetarian</option>
    <option>Quattro Staggione</option>
  </select>
  <br>
  <label>add Garlic 
    <select name="addgarlic[]">
      <option selected="selected">no</option>
      <option>yes</option>
    </select>
  </label>
  <label>add Cheese 
    <select name="addcheese[]">
      <option selected="selected">no</option>
      <option>yes</option>
    </select>
  </label>
  <br>
  <label>anything else? 
    <input name="comment[]" type="text">
  </label>
</div>

Fertiges Formular Demo