How to loop through elements of forms with JavaScript

Question

I have a form    lt form method  POST  action  submit php  gt       lt input type  text  value  1  gt       lt input type  text  value  2  gt       lt input type  text  value  3  gt       lt input type  text  value  4  gt       lt button type  submit  gt Submit lt  button gt   lt  form gt    How can I loop over the input elements in the form  in order to perform some validation on them    I d prefer to use only pure JavaScript  not jQuery or another library  I d also like to limit the iteration to form elements  not any other elements which may be added to the form

User · Answer

A modern ES6 approach  Select the form with any method you like  Use the spread operator to convert HTMLFormControlsCollection to an Array  then the forEach method is available      form elements  forEach Update  Array from is a nicer alternative to spread Array from form elements  it s slightly clearer behaviour   An example below iterates over every input in the form  You can filter out certain input types by checking input type     quot submit quot   x000D   x000D  const forms   document querySelectorAll  form    const form   forms 0    Array from form elements  forEach  input    gt      console log input       x000D   lt div gt     lt h1 gt Input Form Selection lt  h1 gt     lt form gt       lt label gt        Foo        lt input type  text  placeholder  Foo  name  Foo    gt       lt  label gt       lt label gt        Password        lt input type  password  placeholder  Password    gt       lt  label gt       lt label gt        Foo        lt input type  text  placeholder  Bar  name  Bar    gt       lt  label gt       lt span gt Ts  amp amp  Cs lt  span gt       lt input type  hidden  name   id    gt       lt input type  submit  name   id    gt     lt  form gt   lt  div gt  x000D   x000D   x000D

User · Answer

You need to get a reference of your form  and after that you can iterate the elements collection  So  assuming for instance    lt form method  POST  action  submit php  id  my-form  gt      etc    lt  form gt    You will have something like   var elements   document getElementById  my-form   elements   for  var i   0  element  element   elements i            if  element type      text   amp  amp  element value                 console log  it s an empty textfield       Notice that in browser that would support querySelectorAll you can also do something like   var elements   document querySelectorAll   my-form input type text  value         And you will have in elements just the element that have an empty value attribute  Notice however that if the value is changed by the user  the attribute will be remain the same  so this code is only to filter by attribute not by the object s property  Of course  you can also mix the two solution   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       You will basically save one check

User · Answer

Es5 forEach   Array prototype forEach call form elements  function  inpt           if inpt name     name                 inpt parentNode removeChild inpt                  Otherwise the lovely for   var input  for var i   0  i  lt  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

User · Answer

You can iterate named fields somehow like this   let jsonObject       for let field of form elements      if  field name          jsonObject field name    field value          Or  if you need only submiting fields   function formDataToJSON form      let jsonObject         let formData   new FormData form     for let field of formData          jsonObject field 0     field 1         return JSON stringify jsonObject

User · Answer

You can use getElementsByTagName function  it returns a HTMLCollection of elements with the given tag name   var elements   document getElementsByTagName  input   for  var i   0  i  lt  elements length  i          if elements i  value                  alert  empty              Do something here           DEMO  You can also use document myform getElementsByTagName provided you have given a name to yoy form  DEMO with form Name

User · Answer

function            form button   click function             var allowSubmit   true            each    form input text    function index  formField                if   formField  val   trim   length    0                    alert  field is empty                     allowSubmit   false                                    return allowSubmit                DEMO

User · Answer

lt form id  yourFormName   gt   lt input type  text  value    id  val1  gt   lt input type  text  value    id  val2  gt   lt input type  text  value    id  val3  gt   lt button type  button  onclick  yourFunction    gt  Check  lt  button gt   lt  form gt   lt script type  text javascript  gt  function yourFunction       var elements   document querySelectorAll   yourFormName input type text      console log elements     for  var i   0  i lt elements length  i             var check   document getElementById elements i  id  value       console log check          write your logic here        lt  script gt

[javascript] How to loop through elements of forms with JavaScript?

Examples related to javascript

Examples related to html

Examples related to forms