Wednesday, July 4, 2012

Asp.Net jQuery loop through Textboxes


The jQuery library provides various options to work with Textboxes, in this post Asp.Net jQuery loop through Textboxes, we shall see on how to loop through all the textboxes in the page and read the values of each of the text boxes.

Syntax
$('input[type="text"]').each(function() {
   alert($(this).attr('id') + ' => ' + $(this).val());
});


Here is a full example
<html xmlns="http://www.w3.org/1999/xhtml" >
<
head runat="server">
    <title>TextBox</title>
    <link type="text/css"
href="Stylesheet.css"
rel="Stylesheet" />
    <script
type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
    <script
type="text/javascript"
language="javascript">
        $(document).ready(function() {
            $('#cmdLoop').click(function(event) {
                // Disable Postback
                event.preventDefault();
                // Loop Through textBoxes and Get Values
                $('input[type="text"]').each(function() {
                    alert($(this).attr('id') + ' => ' + $(this).val());
                });
            });
   });
    </script>
</head>
<body>
    <form id="frmTextBox" runat="server">
    <div id="pageControls">
        <table>
            <tr>
                <td>Name</td>
                <td><asp:TextBox
id="txtName"
runat="server"
MaxLength="100"></asp:TextBox></td>
            </tr>
            <tr>
                <td>Age</td>
                <td><asp:TextBox
id="txtAge"
runat="server"
MaxLength="25"></asp:TextBox></td>
            </tr>
            <tr>
                <td>Address</td>
                <td><asp:TextBox
ID="txtAddress"
runat="server"
MaxLength="200"></asp:TextBox></td>
            </tr>
            <tr>
                <td>Phone</td>
                <td><asp:TextBox
ID="txtPhone"
runat="server"
MaxLength="20"></asp:TextBox></td>
            </tr>           
            <tr>
                <td>Email</td>
                <td><asp:TextBox
ID="txtEmail"
runat="server"
MaxLength="30"></asp:TextBox></td>
            </tr>
            <tr>
    <td&gtLoop TextBoxes</td>
                <td><asp:Button
ID="cmdLoop"
runat="server"
Text="Loop TextBoxes" /></td>
            </tr>
  </table>
    </div>
    </form>
</body>
</html>

Search Flipkart Products:
Flipkart.com

No comments: