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>

  <!-- 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: