By 06/02/2014 13 Comments

How To Access Values From Multiple/Selected ASP.NET TextBoxes using JQuery

Display / access multiple or selected values

  • If you want to access values from Multiple/Selected ASP.NET TextBoxes in JQuery¬†on a Button click. The values should be displayed separately on each line. Empty Textboxes should be ignored

Following example describes How to display multiple values or selected values in asp.net using JQuery

<script type="text/javascript" src="Scripts/jquery-1.8.2.js"></script> <!-- call jquery file or library into asp.net page --->
    <script>
        $(document).ready(function() { // this is a function which is called by browser when it loads a webpage

            $('[id$="TT_Button1"]').click(function (e) { // an click() event triggered by TT_Button1 
                e.preventDefault(); // prevent post back to server
                $("#TT-paragraph").text('') // call text() function which sets an empty string in TT-paragraph

                .append($("input:text").map(function() { // append() method appends or insert (all input) text contents in end of TT-paragraph, trigger map() function which returns a new array

                    return $(this).val() || null; // return text fields value or null
                }).get().join("<br/>	")); // get() methods retrieves each elements (an array elements) and join that elements into string separated by a new line (<br/>)
            });

            $('[id$="TT_Button2"]').click(function (e) { // an click() event triggered by TT_Button2
                e.preventDefault();
                $("#TT-paragraph").text('')
                .append($("input.selected").map(function() { // append() method appends or insert (selected input) text contents in end of TT-paragraph, trigger map() function which returns a new array

                    return $(this).val() || null;
                }).get().join("<br/> "));

            });

        });

    </script>

Now here is the ASP.NET Code snippet.

<!--- following code renders text fields, buttons and label controls on browser --->

<asp:TextBox ID="TT_TextBox1" runat="server" Text="TT-TextBox1" /><br />
        <asp:TextBox ID="TT_TextBox2" runat="server" Text="TT-TextBox2"/><br />
        <asp:TextBox ID="TT_TextBox3" runat="server" Text="TT-TextBox3"/><br />
        <asp:TextBox ID="TT_TextBox4" runat="server" Text="TT-TextBox1 with selected class" class="selected" /><br />
        <asp:TextBox ID="TT_TextBox5" runat="server" Text="TT-TextBox4"/><br />
        <asp:TextBox ID="TT_TextBox6" runat="server" Text="TT-TextBox2 with selected class" class="selected" /><br /><br />
        <asp:Button ID="TT_Button1" runat="server" Text="Show All"
        ToolTip="Click to show text from all boxes" /><br />
        <asp:Button ID="TT_Button2" runat="server" Text="Show only Selective" ToolTip="Click to show text from boxes with class-selected" />
        <br/>
        Tip: Clicking on the 'Show only Selective' button retrieves<br />
        values from only those TextBoxes which have 'class=selected'
        <p id="TT-paragraph"></p>






Posted in: ASP.NET, jQuery

Leave your valuable Comment

Have a natural attraction for women cosmetics and replica watches uk clothes, no
more than two for men the most attractive one, is to make their own driving experience, happy and can serve as the facade of the car, another is to highlight the taste edify sentiment rolex replica watch. The replica rolex is undoubtedly the most fashionable accessories, wear a suit to attend the activities, but also get a decent match on the replica watches .