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

7
0

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>

HTML Markup – [.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

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!