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:
- Get the Index of a Child node using JavaScript
- Get an Element by Name attribute using JavaScript
- Add a class to the Body element using JavaScript

Hi, my name is Joni Smith. My job is a programmer. I love learning programming languages, especially C++, C#, php, javascript, html, css. I want to share them with you. I hope my articles will bring a lot of useful knowledge to you.
Name of the university: HVNH BA
Major: htttql MIS
Programming Languages: C++, C#, php, javascript, html, css