How to loop through elements of forms with JavaScript?

Question

A modern ES6 approach. The form has a property elements which is a reference to all the input elements. Select the form with any method you like. Use the spread operator to convert the HTMLFormControlsCollection to an Array. Then the forEach method is available. For example [...form.elements].forEach

Update: Array.from is a nicer alternative to the spread operator Array.from(form.elements) it’s slightly clearer behaviour.

An example below iterates over every input in the form.

You can filter out input types with the type property formInputs.filter((input) => input.type !== "submit")

const forms = document.querySelectorAll('form');
const form = forms[0];

Array.from(form.elements).forEach((input) => {
  console.log(input);
});

<div>
  <h1>Input Form Selection</h1>
  <form>
    <label>
      Foo
      <input type="text" placeholder="Foo" name="Foo" />
    </label>
    <label>
      Password
      <input type="password" placeholder="Password" />
    </label>
    <label>
      Foo
      <input type="text" placeholder="Bar" name="Bar" />
    </label>
    <span>Ts &amp; Cs</span>
    <input type="hidden" name="_id" />
    <input type="submit" name="_id" />
  </form>
</div>

Leave a Comment Cancel reply