How to loop through input elements in jQuery ?
Last Updated :
01 Apr, 2021
In this article, we will learn how to loop through input elements and display their current values in jQuery. This can be done using two approaches:
Approach 1: In this approach, we will iterate over every input type which is of text type by using input[type=text] as the selector. Next, we will use the each() method to iterate over the inputs to display the values or perform any operation as needed.
Syntax:
$("#id input[type=text]").each(function() {
//... your code
});
Example:
HTML
<html>
<head>
<script src=
</script>
<script>
$(document).ready(function () {
// Bind the click event to the function
$("#buttonId").click(function () {
// Select all the elements with the
// type of text
$("#formId input[type=text]")
.each(function () {
// Print the value currently in
// the input box
console.log(this.value);
});
})
});
</script>
</head>
<body>
<form action="" id="formId">
<label>enter email</label>
<input type="text"
placeholder="email"><br>
<label>enter name</label>
<input type="text"
placeholder="name"><br>
<label>enter city</label>
<input type="text"
placeholder="city"><br><br>
<button type="button"
id="buttonId">
Loop Through
</button>
</form>
</body>
</html>
|
Output:
Approach 2: In this approach, we will try to iterate over all possible input types. We will select the form using the form id and iterate over every input type using the filter() method in jQuery. The inputs can be filtered by specifying the :input selector in jQuery that selects every type of input on the element it is used. Next, we will use the each() method to iterate over the inputs to display the values or perform any operation as needed.
Syntax:
$('#id *').filter(':input').each(function () {
//..your code
});
Example:
HTML
<html>
<head>
<script src=
</script>
<script>
$(document).ready(function () {
// Bind the click event to the function
$("#buttonId").click(function () {
// Select all the elements
// which is of the type of input
$('#formId *').filter(':input')
.each(function () {
// Print the value currently in
// the input element
console.log($(this).val());
});
})
})
</script>
</head>
<body>
<form action="" id="formId">
<label>enter email</label>
<input type="email"
placeholder="email"><br>
<label>enter password</label>
<input type="password"
placeholder="password"><br>
<label>enter city</label>
<input type="text"
placeholder="city">
<br><br>
<button type="button"
id="buttonId">
Loop Through
</button>
</form>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...