Wednesday, February 20, 2013

Access ASP.NET TextBox Values using Jquery


.aspx Markup:

<form id="form1" runat="server">
<div class="bigDiv">
<h2>Access Values From ASP.NET TextBoxes</h2><br />
<asp:TextBox ID="tb1" runat="server" Text="1stTextBox" /><br />
<asp:TextBox ID="tb2" runat="server" Text="2ndTextBox"/><br />
<asp:TextBox ID="tb3" runat="server" Text="3rdTextBox"/><br />
<asp:TextBox ID="tb4" runat="server" Text="1stTextBox-class-selected" class="selected" /><br />
<asp:TextBox ID="tb5" runat="server" Text="4thTextBox"/><br />
<asp:TextBox ID="tb6" runat="server" Text="2ndTextBox-class-selected"  class="selected" /><br /><br />
<asp:Button ID="btnAll" runat="server" Text="Display All" ToolTip="Click to display text from all boxes" /><br />
<asp:Button ID="btnSel" runat="server" Text="Display Selective" ToolTip="Click to display text from boxes with class-selected" />
<br/>
Tip: Clicking on the 'Display Selective' button retrieves<br />
values from only those TextBoxes which have 'class=selected'
<p id="para"></p>
</div>
</form>

Jquery Script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('input[id$=btnAll]').click(function(e) {
e.preventDefault();
$("#para").text('')
.append($("input:text").map(function() {
return $(this).val() || null;
}).get().join("<br/>  "));
});

$('input[id$=btnSel]').click(function(e) {
e.preventDefault();
$("#para").text('')
.append($("input.selected").map(function() {
return $(this).val() || null;
}).get().join("<br/> "));
});
});
</script>


preventDefault() - Default action of the event will not be triggered.
map() - Translate all items in an array or object to new array of items.
get() - Load data from the server using a HTTP GET request.

No comments:
Write comments
Recommended Posts × +