Java Script: TextBox

 Java Script     sbo     Updated on Mar 08, 2014     VIKRAM     566   

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

  1. Get value from TextBox
  2. Set value to TextBox
  3. Get value from TextBox when Master page is used
  4. 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);
    }
  Related Articles
Check/Uncheck checkboxes when parent checkbox is checked/unchecked and vice-versa in Java Script
Java Script: Number Validation
Java Script: Create/Insert rows dynamically to HTML Table and Remove/Delete rows from HTML Table
Java Script: Create HTML Table dynamically
Java Script: Get Key Codes
  Recent Articles
Check/Uncheck checkboxes when parent checkbox is checked/unchecked and vice-versa in Java Script
Java Script: Number Validation
Java Script: Create/Insert rows dynamically to HTML Table and Remove/Delete rows from HTML Table
Java Script: Create HTML Table dynamically
Java Script: Get Key Codes