.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