Home Asp.net Asp.net TextBox: How to Get Set TextBox Value or Text in jQuery

Asp.net TextBox: How to Get Set TextBox Value or Text in jQuery

322
0
How to get and set asp.net textbox value using javascript?
How to get and set asp.net textbox value using javascript?

In my previous tutorials, I’d explained about how to get and set asp.net textbox value using javascript, how to split string date into day month and year from code-behind, validate checkboxlist using jquery, validate radiobuttonlist using javascript and other more cracking tutorials on Asp.net, JavaScript, jQuery and GridView here.

We can get or set asp.net textbox value from client-side using JavaScript and jQuery. Now here in this tutorial, I’ll explain how to get and set asp.net text box control value or text using jquery client-side.

Get or Set Asp.net TextBox Control Value or Text – [jQuery]

Add the following Asp.net TextBox control, like this:

<asp:TextBox ID="txtChangeValue" runat="server" placeholder="words" 
    ClientIDMode="Static" />

As you can see from above code, I used asp.net textbox control’s ClientIDMode=”Static” property to access text box control by its actual id because when you use server controls in .aspx page, It’ll automatically convert asp.net controls to html during page render.

If you are not using ClientIDMode=”Static” property of textbox control then you needs to use following jquery code to access asp.net control:

<script type="text/javascript">
    //To Set TextBox Value or Text
    $("input[name*='txtGetSetText']").val("yourvalue");
    //OR
    $("input[id$='txtGetSetText']").val("yourvalue");

    //To Get TextBox Value or Text
    var currValue = $("input[name*='txtGetSetText']").val();
    //OR
    var currValue = $("input[id$='txtGetSetText']").val();
</script>

For this example, I used ClientIDMode=”Static” property of textbox control so I’m using following jquery:

To set the value of textbox, we need to use:

$("#txtGetSetText").val(changeValue);

To get the value from textbox, we need to use:

var currValue = $("#txtGetSetText").val();

For this example, I used following jquery shown as below:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">
    function SetMe() {
        var changeValue = $("#txtChangeValue").val();
        $("#txtGetSetText").val(changeValue);
        return false;
    }

    function GetMe() {
        var currValue = $("#txtGetSetText").val();
        alert("Typed text is: " + currValue);
        return false;
    }

    function ResetMe() {
        $("#txtChangeValue").val("www.aspneto.com");
        $("#txtGetSetText").val("www.aspneto.com");
        return false;
    }
</script>

HTML Markup – [.aspx]

Here is the complete HTML Markup for .aspx page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Get and Set asp.net textbox value using jquery</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
        function SetMe() {
            var changeValue = $("#txtChangeValue").val();
            $("#txtGetSetText").val(changeValue);
            return false;
        }

        function GetMe() {
            var currValue = $("#txtGetSetText").val();
            alert("Typed text is: " + currValue);
            return false;
        }

        function ResetMe() {
            $("#txtChangeValue").val("www.aspneto.com");
            $("#txtGetSetText").val("www.aspneto.com");
            return false;
        }
</script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td colspan="4">
                        <h6>Type some words and click "Set Me!" button to set typed
                                value to below textbox</h6>
                    </td>
                </tr>
                <tr>
                    <td>Change Textbox Value</td>
                    <td>:</td>
                    <td>
                        <asp:TextBox ID="txtChangeValue" runat="server" placeholder="words"
                            ClientIDMode="Static" />
                    </td>
                    <td>
                        <asp:Button ID="btnSetMe" runat="server" Text="Set Me!"
                            OnClientClick="SetMe();" />
                    </td>
                </tr>
                <tr>
                    <td colspan="4">&nbsp;</td>
                </tr>
                <tr>
                    <td colspan="4">Click "Get Me!" button to get textbox value</td>
                </tr>
                <tr>
                    <td>Current Textbox Value</td>
                    <td>:</td>
                    <td>
                        <asp:TextBox ID="txtGetSetText" runat="server" Text="AspnetO"
                            ClientIDMode="Static" />
                    </td>
                    <td>
                        <asp:Button ID="btnGetMe" runat="server" Text="Get Me!"
                            OnClientClick="GetMe();" />
                    </td>
                </tr>
                <tr>
                    <td colspan="4">&nbsp;</td>
                </tr>
                <tr>
                    <td colspan="2">&nbsp;</td>
                    <td colspan="2">
                        <asp:Button ID="btnResetMe" runat="server" Text="Reset Me!"
                            OnClientClick="ResetMe();" />
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

Example Result

How to get and set asp.net textbox value using javascript?
How to get and set asp.net textbox value using javascript?

Download Example

Git Repo

That’s it! This is one of the simplest way to get or set asp.net textbox or input control value from client-side in .net using javascript or jquery.

Let me know if you’ve any questions or doubts about this tutorial by writing down your queries in comment below. I would be happy to provide you my feedback as soon as possible.

Happy Coding!

Previous articleDropDownList Validation: Validate DropDownList using jQuery in Asp.net
Next articleHow to Validate Checkboxlist in jQuery [Quick Solutions]
Hi there, I am Mayank, the man behind Technical Mack. I started AspnetO with a motive to educate people on various programming languages ranging from beginners to expert level. Through this blog, I aim to provide more insightful content.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

3 × one =