Post
Ask Question

How To Get Value Of All Textboxes Using jQuery Each Method

In this article, I am going to share how you can get the value of all textboxes using the jQuery Each function.

Step 1

Add one webpage to your application as I have added in the below figure.

jQuery

Step 2

Design the webpage with some textboxes and one button field. I used the following code to design the layout. There are three textboxes and one button. 

  1. <input type="text" id="txtUserName" />  
  2. <input type="text" id="txtUserAddress" />  
  3. <input type="text" id="txtUserDepartment" />  
  4. <input type="text" id="txtUserstatus" />  
  5. <input type="button" value="Click Me" id="btnClick" />  

jQuery
Remarks

You can use ASP.NET server-side controls or HTML controls but I will recommend you to use HTML control. HTML controls are very lightweight and take much less time to load on the webpage.

Step 3

Add jQuery library to your application inside the <head> tag.

  1. <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>  

 

jQuery

Step 4

Now, it is time to write the jQuery code on the button click event.

Write the given code inside the <head> tag. 

  1. <script>  
  2.         $(document).ready(function () {  
  3.             $("#btnClick").click(function () {  
  4.   
  5.                 $("input[type='text']").each(function () {  
  6.   
  7.                     alert($(this).val());  
  8.                 })  
  9.             });  
  10.   
  11.         });  
  12.  </script>  

Step 5

Now, see the output of your application on the button click.

jQuery

Remark

You can download the working project from the given link.