• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 500
  • Last Modified:

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

0
pprater1
Asked:
pprater1
1 Solution
 
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
 
wht1986Commented:
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
 
prairiedogCommented:
Try this:
function togglePanel()
{
    alert(document.getElementById('<%=ContactUsPanel.ClientID%>'));
}

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Anurag ThakurCommented:
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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now