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

0
0

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:

<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:

//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();

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=”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>

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=”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″>&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

Download Example

[wpdm_file id=7]

Git Repo

LEAVE A REPLY

Please enter your comment!
Please enter your name here
Captcha verification failed!
CAPTCHA user score failed. Please contact us!