web-dev-qa-db-fra.com

Comment parcourir des éléments de formulaire avec JavaScript?

J'ai un formulaire:

<form method="POST" action="submit.php">
    <input type="text" value="1">
    <input type="text" value="2">
    <input type="text" value="3">
    <input type="text" value="4">
    <button type="submit">Submit</button>
</form>

Comment puis-je parcourir les éléments d'entrée du formulaire (afin de les valider)?

Je préférerais utiliser uniquement du JavaScript pur, pas jQuery ou une autre bibliothèque. J'aimerais également limiter l'itération aux éléments de formulaire, pas à d'autres éléments pouvant être ajoutés au formulaire.

javascripthtmlforms
23
Please Delete me

Vous devez obtenir une référence de votre formulaire et ensuite, vous pouvez itérer la collection elements. Donc, en supposant par exemple:

<form method="POST" action="submit.php" id="my-form">
  ..etc..
</form>

Vous aurez quelque chose comme:

var elements = document.getElementById("my-form").elements;

for (var i = 0, element; element = elements[i++];) {
    if (element.type === "text" && element.value === "")
        console.log("it's an empty textfield")
}

Notez que dans le navigateur qui prendrait en charge querySelectorAll, vous pouvez également faire quelque chose comme:

var elements = document.querySelectorAll("#my-form input[type=text][value='']")

Et vous aurez dans elements uniquement l'élément qui a un attribut de valeur vide. Notez cependant que si la valeur est modifiée par l'utilisateur, l'attribut restera le même. Ce code ne doit donc être filtré que par attribut et non par la propriété de l'objet. Bien sûr, vous pouvez également mélanger les deux solutions:

var elements = document.querySelectorAll("#my-form input[type=text]")

for (var i = 0, element; element = elements[i++];) {
    if (element.value === "")
        console.log("it's an empty textfield")
}

Vous économiserez essentiellement un chèque.

33
ZER0

Une approche ES6 moderne. Sélectionnez le formulaire avec la méthode de votre choix. Utilisez l'opérateur spread pour convertir HTMLFormControlsCollection en un tableau. La méthode forEach est disponible. [...form.elements].forEach

Un exemple ci-dessous itère sur chaque entrée du formulaire. Vous pouvez filtrer certains types d'entrée en cochant input.type != "submit"

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

[...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>

8
Lex

Vous pouvez utiliser getElementsByTagName function, il retourne une collection HTMLCollection d’éléments avec le nom de balise donné.

var elements = document.getElementsByTagName("input")
for (var i = 0; i < elements.length; i++) {
    if(elements[i].value == "") {
        alert('empty');
        //Do something here
    }
}

D&EACUTE;MO

Vous pouvez également utiliser document.myform.getElementsByTagName à condition que vous ayez donné un nom à yoy form

DEMO avec le formulaire Nom

7
Satpal

Es5 pour chaque:

Array.prototype.forEach.call(form.elements, function (inpt) {
       if(inpt.name === name) {
             inpt.parentNode.removeChild(inpt);
       }
});

Sinon la belle pour:

var input;
for(var i = 0; i < form.elements.length; i++) {
     input = form.elements[i];

      // ok my Nice work with input, also you have the index with i (in foreach too you can get the index as second parameter (foreach is a wrapper around for, that offer a function to be called at each iteration.
}
0
Mohamed Allal

Vous pouvez itérer les champs nommés comme ceci:

let jsonObject = {};
for(let field of form.elements) {
  if (field.name) {
      jsonObject[field.name] = field.value;
  }
}
0
Ansar Ozden