getElementByID not getting element

I have read many posts about problems with getElementByID, but I do not understand why my code is not working.  My assumption is that it has something to do with the fact that when the page is rendered, a prefix is added to the ID of my element - if this is true, why would this function do any good to begin with??

I have an ASP.Net page and all I want to do is get an element by it's ID.  The code posted is from a WebUserControl.  The alert(document.getElementById("ContactUsPanel")) call displays 'null'.
<asp:Button ID="ContactUsBtn" runat="server" Text="Contact Us" UseSubmitBehavior="true" OnClientClick="togglePanel(); return false;" />
<asp:Panel ID="ContactUsPanel" runat="server" CssClass="ContactUsPanel">
    <asp:Label ID="PhoneLabel" runat="server" Text="Phone:"></asp:Label>
    <asp:TextBox ID="PhoneTextBox" runat="server"></asp:TextBox>
    <asp:Button ID="SubmitBtn" runat="server" Text="Submit" />
</asp:Panel>
 
<script language="javascript" type="text/javascript">
 
function togglePanel()
{
    alert(document.getElementById("ContactUsPanel"));
}
 
</script>

Open in new window

pprater1Asked:
Who is Participating?
 
wht1986Connect With a Mentor Commented:
That panel ust be inside a user control or another panel probably for a prefix to be added to it.  Try something like this:

alert(document.getElementById("<%= ContactUsPanel.ClientID %>"));

ClientID is the full client ID with any prefix.

might try something along the lines of making the JS function like :

function togglePanel(panelID)
{
    alert(document.getElementById(panelID));
}

and in the page load event set the onclient click property by using

ContactUsBtn.OnClientClick = "togglePanel('" + ContactUsPanel.ClientID + "'); return false;";

hope that helps
0
 
ppittleCommented:
pprater1,

You might find this more useful.  When you call getElementById("ContactUsPanel") returns an object.  If you're trying to get the value of, say a TextBox you can use getElementById("PhoneTextBox").value, as I did in the example.

PJ
<head runat="server">
    <title>Untitled Page</title>
 
    <script language="javascript" type="text/javascript">
 
function togglePanel()
{
    alert(document.getElementById("PhoneTextBox").value);
}
 
    </script>
 
</head>
<body>
    <form id="form1" runat="server">
        <asp:Button ID="ContactUsBtn" runat="server" Text="Contact Us" UseSubmitBehavior="true"
            OnClientClick="togglePanel(); return false;" />
        <asp:Panel ID="ContactUsPanel" runat="server" CssClass="ContactUsPanel">
            <asp:Label ID="PhoneLabel" runat="server" Text="Phone:"></asp:Label>
            <asp:TextBox ID="PhoneTextBox" runat="server"></asp:TextBox>
            <asp:Button ID="SubmitBtn" runat="server" Text="Submit" />
        </asp:Panel>
    </form>
</body>

Open in new window

0
 
prairiedogCommented:
Try this:
function togglePanel()
{
    alert(document.getElementById('<%=ContactUsPanel.ClientID%>'));
}

Open in new window

0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
Anurag ThakurTechnical ManagerCommented:
try this
alert(document.getElementById('<%=ContactUsPanel.ClientID %>');
0
 
JoachimMartinsenCommented:
The reason why it returns NULL is that you are trying to alert the element itself.

To get the elements value, you can add .value like this:
document.getElementById("MyObjectId").value

However, I see that you are referring to the asp:Panel object which renders out as an div tag. Div tags doesn't have values. So instead of using .value you sould use .innerHTML to get everything inside the div.

It looks to me like you are trying to hide/show the panel with the Contact Us button. If so, I've added the javascript of how you can achieve that.
<script language="javascript" type="text/javascript">
 
function togglePanel() {
	if ( document.getElementById("ContactUsPanel").style.visibility == "hidden" ) {
		document.getElementById("ContactUsPanel").style.visibility = "visible";
	}
	else {
		document.getElementById("ContactUsPanel").style.visibility = "hidden";
	}
}
 
</script>

Open in new window

0
 
pprater1Author Commented:
My ultimate goal here was not to alert an object - I just wanted to know that I have a handle on any object through getElementByID.  Alerting a found object will spit out [object].  Joachim is correct, I do have code similar, but what you posted is exactly what is not working - thus the test code.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.