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.
Next Recommended Reading Getting Text and Value From Selected Item in Kendo ComboBox using JQuery