Access Values from All asp.net TextBoxes using jQuery

Let suppose we want to access values from all ASP.NET Textboxes on a Button click. Empty Textboxes should be ignored.

JQuery Section:

$(function () {
$('input[id$=btnAll]').click(function (e) {
e.preventDefault();
$("#para").text('')
.append($("input:text").map(function () {
return $(this).val() || null;
}).get().join("
"));
});
});

Explanation:
To achieve this requirement,$.map() is an extremely useful function which saves us from writing many steps. This function transforms an array into another array by using a filter function and then allows us to access individual items of the array and modify them.
In the code shown above, on the button (btnAll) click, the postback is prevented using e.preventDefault().The content of the paragraph is reset ($(“#para”).text(”)) and we then use a Selector to match all input elements of type text (input:text). The $.map() method iterates through all the textboxes on the page and invokes a filter function to select the non-empty textboxes. The results are appended to a paragraph (para) and displayed individually using a line break (<br/>).

Complete code

$(function () {
$('input[id$=btnAll]').click(function (e) {
e.preventDefault();
$("#para").text('')
.append($("input:text").map(function () {
return $(this).val() || null;
}).get().join("
"));
});
});

<asp:TextBox ID=”txtBox1″ runat=”server” Text=”Text Box 1″ /><br />
<asp:TextBox ID=”txtBox2″ runat=”server” Text=”Text Box 2″/><br />
<asp:TextBox ID=”txtBox3″ runat=”server” Text=”Text Box 3″/><br />
<asp:TextBox ID=”txtBox4″ runat=”server” Text=”Text Box 4″ /><br />
<asp:Button ID=”btnAll” runat=”server” Text=”Display All” ToolTip=”Click to display text from all boxes” />
<br/><p id=”para”></p>

Output

access-values-from-all-textboxes-using-jquery

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s