How can I access runat="server" ASP element using javascript?

Question

It seems everyone is doing this (in code posts etc.)...but I don't know how. :(

Whenever I try to manipulate an asp element using JavaScript I get an "element is null" or "document is undefined" etc. error.....

JavaScript works fine usually,...but only when I add the runat="server" attribute does the element seem invisible to my JavaScript.

Any suggestions would be appreciated.

Thanks, Andrew

Porism

Answer 1

What's probably happening is that your element/control is within one or more ASP.NET controls which act as naming containers (Master page, ITemplate, Wizard, etc), and that's causing its ID to change.

You can use "view source" in your browser to confirm that's what's happening in the rendered HTML.

If your JavaScript is in the ASPX page, the easiest way to temporarily work around that is to use the element's ClientID property. For example, if you had a control named TextBox1 that you wanted to reference via JS:

var textbox = document.getElementById('<%= TextBox1.ClientID %>');

Subdued

great answer...but had to give it to the person who answered first...thanks for the explanation though! – Porism

@Porism - if this is the better answer, you ought to accept it as such. On SO quality comes before speed. – Rior

ya that's what i was thinking too actually...will do. – Porism

Answer 2

Making an element runat="server" changes the client-side ID of that element based on what ASP.NET naming containers it's inside of. So if you're using document.getElementById to manipulate the element, you'll need to pass it the new ID generated by .NET. Look into the ClientId property to get that generated ID...you can use it inline in your Javascript like so:

var element = document.getElementById('<%=myControl.ClientID%>');

Romalda

Answer 3

If you have a textbox:

<asp:TextBox id="txtText" runat="server" />

YOu can use:

var textBox=document.getElementById('<%=txtText.ClientID %>');

Any WebControl exposes the same ClientID property.

Disinterest

Answer 4

All though the question has been answered, thought I would just post some further info...

Rick Strahl provided quite an intresting work around to this problem.

http://www.west-wind.com/WebLog/posts/252178.aspx

Thankfully when ASP .NET 4.0 arrives, it will allow you to specify exacly what the client ID's will be!

http://www.codeproject.com/KB/aspnet/ASP_NET4_0ClientIDFeature.aspx

Semicolon

+1: for Rick's nice solution and .NET 4 new feature. It solves the problem with having JS in external file (where can't be used something like <%=txtText.ClientID %>) – Steelyard