In this article I will explain with an example, how to solve the issue of JavaScript document.getElementById returning NULL when accessing ASP.Net control with Master Page.
When Master Page is used the ID of ASP.Net controls are changed on Client Side and hence JavaScript document.getElementById did not able to find the control and returns NULL.
The Problem
The following example consists of a TextBox, a Label and a HTML Button.
The Button has been assigned an OnClick event handler to which the name of JavaScript function has been specified.
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:Label ID="lblName" runat="server" Text="ASPSnippets"></asp:Label>
<input id="btnSubmit" type="button" value="Submit" onclick="GetValue()"/>
<script type="text/javascript">
function GetValue()
{
var label = document.getElementById("lblName");
var textbox = document.getElementById("txtName");
alert("Label Value is " + label.innerHTML);
alert("TextBox Value is " + textbox.value);
}
</script>
</asp:Content>
When you run the application and click on the Button, you will get JavaScript runtime error: Unable to get property 'innerHTML' of undefined or null reference.
![ASP.Net: JavaScript document.getElementById returns NULL when using Master Page]()
The reason is when using Master Page the ID of ASP.Net controls are changed on Client Side.
The ID of the TextBox has been changed to ContentPlaceHolder1_txtName and Label has been changed to ContentPlaceHolder1_lblName.
Hence the JavaScript function did not find any controls with IDs: lblName and txtName.
![ASP.Net: JavaScript document.getElementById returns NULL when using Master Page]()
The Solution
The solution to the problem is ASP.Net Inline Tags and the ClientID and UniqueID properties of an ASP.Net Control.
The definitions are as follows:
ClientID – ASP.Net automatically generates a ClientID for a server when the control is rendered as HTML id of the control.
UniqueID – The hierarchically-qualified unique identifier assigned to a control by the ASP.Net rendered as HTML name of the control.
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:Label ID="lblName" runat="server" Text="ASPSnippets"></asp:Label>
<input id="btnSubmit" type="button" value="Submit" onclick="GetValue()"/>
<script type="text/javascript">
function GetValue() {
var label = document.getElementById("<%=lblName.ClientID%>");
var textbox = document.getElementById("<%=txtName.ClientID%>");
alert("Label Value is " + label.innerHTML);
alert("TextBox Value is " + textbox.value);
}
</script>
</asp:Content>
![ASP.Net: JavaScript document.getElementById returns NULL when using Master Page]()
Screenshot
![ASP.Net: JavaScript document.getElementById returns NULL when using Master Page]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Downloads
