How To Loop Through All Form Elements Using JavaScript

Posted on by Joni Smith
Loop through all Form elements using JavaScript

This article will show you how to loop through all form elements using JavaScript by loops like for, for…of, and forEach. Follow the examples below to apply to your case.

Loop through all form elements using JavaScript

Using for loop

We will create a form using Html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <form action="" id="id_form">
        <input type="text" name="text" id="id1">
        <input type="button" name="button" value="button" id="id2">
        <input type="email" name="email" id="id3">
    </form>
   
    <script src="index.js"></script>
</body>
</html>

Loops are used to perform repetitive actions. Like other programming languages, Javascript has many different looping of constructs while, for, do...while,… However, for the sake of simplicity, let’s work together with the for loop in this problem. 

Code sample:

let form = document.getElementById('id_form');
 
// Iterate through each element of the form by index
for(let i = 0; i < form.length; i++){
    console.log(form[i]);
}
  • let i = 0 : initialize the variable for the loop.
  • i < form.length : condition for the loop to execute.
  • i++ : increment the run variable value by 1 every time the action is done.

Output

<input type="text" name="text" id="id1">
<input type="button" name="button" value="button" id="id2">
<input type="email" name="email" id="id3">

The above code is an example of a for loop in Javascript, very easy to use, isn’t it? But the syntax is quite long, is there a shorter way?

The answer is yes. We will use for...of loop.

Using for…of loop

This loop was introduced in ES6. Similar to for, this loop is used to traverse each element of the traversal object. The number of iterations equals the number of elements of the object.

Code sample:

let form = document.getElementById('id_form');
 
// Loop through each element of the form object by for...of loop
for(let element of form.elements){
    if(element.name == 'button'){
        console.log("This is a button");
    }else console.log("This is not a button");
}

Output

This is not a button
This is a button
This is not a button

Using Array.from() and forEach() method

ForEach JavaScript is a method of array object in JavaScript. This function will help iterate through the elements of the array, it has a parameter passed, and this parameter will store the element’s value in each iteration.

So to use forEach loop to iterate through form elements, we have to convert to array data type using Array.form() method.

Code sample:

let form = document.getElementById('id_form');
 
// Convert the form object to an array and iterate over each element of the array
Array.from(form.elements).forEach(element =>{
    if(element.name == "text"){
        console.log("This is a text");
    } else if(element.name == "button"){
        console.log("This is a button");
    } else console.log("This is an email");
})

Output

This is a text
This is a button
This is an email

Summary

Above, I showed you how to loop through all form elements using JavaScript using various methods. Let’s choose the one that works best for you. I hope they are helpful to you. To better understand the lesson’s content, practice rewriting today’s examples. And let’s learn more about JavaScript in the next lessons here. Have a great day!

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *