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:
To get the value from textbox, we need to use:
If you want to get and set textbox value using javascript, you need to use following javascript code as shown below:
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>
HTML Markup – [.aspx]
Following is the complete HTML Markup code for .aspx page:
<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″> </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″> </td>
</tr>
<tr>
<td colspan=”2″> </td>
<td colspan=”2″>
<asp:Button ID=”btnResetMe” runat=”server” Text=”Reset Me!”
OnClientClick=”ResetMe();” />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Example Result
