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

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

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

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 javascript from client-side.

In my previous tutorials, I’d explained about how to get and set asp.net textbox value using jquery, 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.

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

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

document.getElementById("txtGetSetText").value = changeValue;

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

var currValue = document.getElementById("txtGetSetText").value;

If you want to get and set textbox value using javascript, you need to use following javascript code as shown below:

<script type="text/javascript">
function SetMe() {
    var changeValue = document.getElementById("txtChangeValue").value;
    document.getElementById("txtGetSetText").value = changeValue;
    return false;
}

function GetMe() {
    var currValue = document.getElementById("txtGetSetText").value;
    alert("Typed text is: " + currValue);
    return false;
}

function ResetMe() {
    document.getElementById("txtChangeValue").value = "www.aspneto.com";
    document.getElementById("txtGetSetText").value = "www.aspneto.com";
    return false;
}
</script>

Asp.net TextBox: How to Get Set TextBox Value or Text in JavaScript – [.aspx]

Following is the complete HTML Markup code 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 javascript</title>
    <script type="text/javascript">
        function SetMe() {
            var changeValue = document.getElementById("txtChangeValue").value;
            document.getElementById("txtGetSetText").value = changeValue;
            return false;
        }

        function GetMe() {
            var currValue = document.getElementById("txtGetSetText").value;
            alert("Typed text is: " + currValue);
            return false;
        }

        function ResetMe() {
            document.getElementById("txtChangeValue").value = "www.aspneto.com";
            document.getElementById("txtGetSetText").value = "www.aspneto.com";
            return false;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table>
        <tr>
            <td colspan="4">Type some words and click "Set Me!" 
                button to set the typed value to below textbox
            </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 best way to get asp.net textbox or input value or text using javascript or jquery in asp.net.

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 articleGet Selected Text Value from DropDownList in Asp.net jQuery
Next articleFacebook like box Overlapping and Positioning Issue
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

1 × 4 =