How to get or set value of a textbox in Java Script
Introduction:
In this article i will explain how to work with TextBox in Java Script.
Description:
In previous articles i explained How to replace string in SQL Server, How to replace string in C#, How to replace string in Java Script, and How many ways we can replace the string in Java Script. Now i will explain how to work with TextBox in Java Script.
This includes the following:
- Get value from TextBox
- Set value to TextBox
- Get value from TextBox when Master page is used
- Set value to TextBox when Master page is used
Get value from TextBox:
Add one server side TextBox control and a HTML Button control into Web Form as shown below.
Source:
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" Text="Welcome to sbo"></asp:TextBox>
</div>
<div>
<input type="button" id="btnGet" value="Get TextBox Value" onclick="Get();" /></div>
</form>In the above code button has onclick event. This will call java script Get() method to get the TextBox value. To do this i'm writing one java script function as shown below.
<script type="text/javascript">
function Get() {
alert(document.getElementById("TextBox1").value);
}
</script>Now if you click the '' button it will display TextBox text in alert message.
If you are using Master page and Content page then the Text Box id will be changed. why?
When you are using a master page with content page then the control id will be chaged some thing like 'ContentPlaceHolder1_TextBox1' when it is renderd to browser. TextBox id is prefixed with master page ContentPlaceHolder id. Suppose your TextBox inside a User Control, then it's id is prefixed with Use Control ID. So you need to change the script as shown below.
<script type="text/javascript">
function Get() {
alert(document.getElementById("<%= TextBox1.ClientID %>").value);
}
</script>Now run the page, go to view source of browser page and check the control id and the script, it will be chaged as below.
view-source:
<body>
<form method="post" action="Demo.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEyNzg5MTU3MzFkZC93hgB/Fe0+9QTAi07hucMYA8prKttu+wbz7lyVF8dw" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAJz3L3o06+F6f2sKuTR7ANsiQePsqwZBn0oj+rRyBHv16gs1UAmqJIc3xBceUcdOXUENW/YKk9suAizhe+2nXD1" />
</div>
<div>
<script type="text/javascript">
function Get() {
alert(document.getElementById("ContentPlaceHolder1_TextBox1").value);
}
</script>
<div>
<input name="ctl00$ContentPlaceHolder1$TextBox1" type="text" value="Welcome to sbo" id="ContentPlaceHolder1_TextBox1" />
</div>
<div>
<input type="button" id="btnGet" value="Get TextBox Value" onclick="Get();" /></div>
<div>
</div>
</form>
</body>Set value to TextBox:
Similarly to set value for TextBox, write a function as shown in below.
function Set() {
document.getElementById("TextBox1").value = 'Welcome to sbo';
}
Now call this function in button onclick event.
Note:
As we discussed, if you are using Master page and Content page then id's will get changed. So, update Set() function as shown below.
function Set() {
document.getElementById("<%= TextBox1.ClientID %>").value = 'Welcome to sbo';
alert(document.getElementById("<%= TextBox1.ClientID %>").value);
}-
CreatedMar 08, 2014
-
UpdatedOct 03, 2020
-
Views2,070