Selecting form fields with JavaScript

Formularfelder können auf zwei Arten selektiert werden:

1. querySelector
2. form.elements (die best practice Methode)

Form.elements

Alle <form> Elemente verfügen über die Eigenschaft element. Sie gibt ein Objekt zurück, das drei Typen von Eigenschaft-Wert-Paaren enthält:

1. den name von jedem Formularfeld und dessen zugehöriges Element
2. die id von jedem Formularfeld und dessen zugehöriges Element
3. den Index von jedem Formularfeld und dessen zugehöriges Element

Looping through all fields

Das zurückgegebene Objekt ist eine (iterable) HTMLFormControlsCollection, d.h., wir können über das Objekt iterieren und jedes einzelne Element ausgeben:

<form method="post" action="/blubb.html">
  <input type="text" name="input1" id="idForInput1" /><br>
  <input type="text" name="input-2" id="idForInput2" /><br>
  <input type="text" name="input3" id="idForInput3" /><br>
  <button class="submit">Ab damit!</button>
</form>

const form = document.querySelector('form');
const formElements = form.elements;

for (const element of formElements) {
  console.log(element);
}

Selecting a specific field

Wir können id, name oder index verwenden, um ein bestimmtes Element zu selektieren. Falls Bindestriche verwendet werden, müssen wir die bracket notation nutzen.

const usingID = form.elements.idForInput1;
const usingName = form.elements['input-2'];
const usingIndex = form.elements[2];