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/Set Asp.net TextBox Control Value or Text – [jQuery]
Add the following Asp.net TextBox control, like this:
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:
$(“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();
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:
To get the value from textbox, we need to use:
For this example, I used following jquery shown as below.
</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:
<head id=”Head1″ runat=”server”>
<title>Get and Set asp.net textbox value using jquery</title>
<script type=”text/javascript” src=”http://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″> </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
