How to loop through input elements in jQuery ?

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>    <!-- Include jQuery -->  <script src="https://code.jquery.com/jquery-3.6.0.js">  </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>    <!-- Define the form and the inputs -->  <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>    <!-- Include jQuery -->  <script src="https://code.jquery.com/jquery-3.6.0.js">  </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>    <!-- Define the form and the inputs -->  <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:
jQuery-Methods
jQuery-Questions
jQuery-Selectors
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.