How to Get/Set values of Controls in ASP.NET using JavaScript

Vishal Gilbile
2y
110.5k
0
1

Article

At a time there becomes a requirement to get/set the values of controls in our project. We can get/set the values of controls through programming or by using JavaScript. If we just have to perform a get/set operation we can do it by simply using JavaScript.

Scenario I

Let's consider a scenario where I've 2 textboxes named TextBox1 and TextBox2 and I need to set the value of a particular textbox in the other textbox on the same page.

I can simply do it programmatically with the following line.

TextBox2.Text=TextBox1.Text;

The same part of code can be done by using JavaScript:

document.getElementById('<%=TextBox2.ClientID%>').value=document.getElementById('<%=TextBox1.ClientID%>').value

document.forms[0]["TextBox2"].value=document.forms[0]["TextBox1"].value;

Note: Provided that the pages are just normal web page and don't have any master page applied to it.

Scenario II

Now consider a scenario if we have a master applied on a particular web page and we want to get/set the value of a particular control within the same web page.

For doing this activity we'll create a sample master page. The following is the code for the master page.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="TopLevel.master.cs" Inherits="TopLevel" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        .style1
        {
            width: 4%;
        }
        .style2
        {
            width: 1274px;
        }
    </style>
</head>
<body>
 <form id="form1" runat="server">
<table style="width:100%;">
        <tr>
            <td align="right" colspan="3">
                <asp:Image ID="Image1" runat="server" ImageUrl="~/images/AdvWorksLogo.gif" />
            </td>
        </tr>
        <tr>
            <td class="style1">
                <asp:Image ID="Image2" runat="server" ImageUrl="~/images/AdvWorksSideBar.gif" />
            </td>
            <td valign="top" class="style2">
        <asp:ContentPlaceHolder id="pageContent" runat="server">

            <p>
                <br />
            </p>
            <p>
            </p>
            <p>
            </p>
            <p>
            </p>
           
        </asp:ContentPlaceHolder>
            </td>
            <td style="width: 10%">
                &nbsp;</td>
        </tr>
        <tr>
            <td align="right" colspan="3">
                <asp:Label ID="Label1" runat="server"
                    Text="&lt;b&gt;Copyright&amp;copy;[email protected]&lt;/b&gt;"></asp:Label>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

Following is the source code for the Test.aspx apge.

<%@ Page Language="C#" MasterPageFile="~/TopLevel.master" AutoEventWireup="true" CodeFile="Test1.aspx.cs" Inherits="Test1" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="pageContent" Runat="Server">

    <script type="text/javascript">
    function getData()
    {
        /*
        Here your this method of setting the value will not work because in our current web page we donot have a form tag we have a content tag
        which is inside the master page. So our form tag will reside on master then how do i access/set the value through this method.
            document.forms[0]["TextBox2"].value=document.forms[0]["TextBox1"].value;
        */
        document.getElementById('<%=TextBox2.ClientID %>').value=document.getElementById('<%=TextBox1.ClientID %>').value;
          /*
          OR
              var a = document.getElementById('<%= "ctl00_pageContent_TextBox1" %>').value;
            document.getElementById('<%= "ctl00_pageContent_TextBox2" %>').value = a;
          */     
    }
</script>
    <table style="width: 40%;">
        <tr>
            <td>
                Enter Your Name :
            </td>
            <td>
              <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </td>
            </tr>
            <tr>
            <td colspan="2" align="center">
                   <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="getData()" />
            </td>
            </tr>
        <tr>
            <td>Your Name is :</td>
            <td>
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
        </tr>
    </table>
</asp:Content>

NOTE: In case you want to access a master page control on the child page you can use the following code.

document.getElementById('<%=Page.MasterPage.FindControl("pageContent").FindControl("TextBox2").ClientID %>').value=document.getElementById('<%=Page.MasterPage.FindControl("pageContent").FindControl("TextBox1").ClientID %>').value

Hope you've liked the article.