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