Wednesday, July 4, 2012

Asp.Net jQuery set Textbox Values


The jQuery library provides various options to work with Textboxes, in this post Asp.Net jQuery set Textbox Values, we shall see on how to set the values to the Asp.net Textbox control.

We can set values to Textboxes using jQuery as follows.

$('#yourTextBoxID').val('Your Value');


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() {
            $('#cmdSetValue').click(function(event) {
                event.preventDefault();
                $('#txtName').val('Test Name');
                $('#txtAge').val('28');
                $('#txtAddress').val('Test Address');
                $('#txtPhone').val('(123)-123-5678');
                $('#txtEmail').val('test@testdomain.com');
            });
        });
    </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>Set TextBox Values</td>
                <td><asp:Button
ID="cmdSetValue"
runat="server"
Text="Set Values" /></td>
            </tr>  

  </table>
    </div>
    </form>
</body>
</html>

Run the application, click on the Set Values button, notice that the text is set to all the text boxes.

Search Flipkart Products:
Flipkart.com

No comments: