getElementById not finding control generated by ASP.net

Question

I am simply trying to store a label in a variable in javascript but for some reason this isn't working with document.getElementById('control');. I know my javascript is linking to my html file fine because everything else works.

Here is my javascript code:

function performEvapCooledCircuit(txt)
{
    var error = document.getElementById('lblError');


    if (txt.value == null || isNaN(txt.value))
    {
       error.style.visibility = "visible";
    }
}

Here is the html code for my label:

<asp:Label ID="lblError" class="NormLabel" runat="server" 
   style="color:red; visibility:hidden;" Text="Invalid Input."></asp:Label>

I am getting an error that says object expected??

hunter · Accepted Answer · 2011-01-04T16:25:02.310

22

The ID that ASP.NET will generate will not be "lblError" so you'll need to reference it by its ClientID

document.getElementById('<%=lblError.ClientID %>');

If your javascript file is external I've usually had to write a type of "Init" javascript method to make sure my ID's were set up property

On your ASPX page:

<script type="text/javascript">
    var lblError = null;
    function InitializeVariables()
    {
        if (lblError == null) // make sure you only do this once
        {
            lblError = document.getElementById("<%=lblError.ClientID %>");
        }
    }
</script>
<asp:Label 
    ID="lblError"
    class="NormLabel"
    runat="server" 
    style="color:red; visibility:hidden;"
    Text="Invalid Input."></asp:Label>

Then in your javascript file you'll have to call InitializeVariables() to make sure you've got the variables pointing to the proper asp.net controls

function performEvapCooledCircuit(txt)
{
    InitializeVariables();

    if (txt.value == null || isNaN(txt.value))
    {
        lblError.style.visibility = "visible";
    }
}

edited Jan 04 '11 at 16:25

answered Jan 04 '11 at 16:19

hunter

62,308
19
113
113

Along with Šime Vidas explanation, this answer could be helpful. – John Fisher Jan 04 '11 at 16:21
@hunter The OP says that the "javascript is linking to his html file" – Šime Vidas Jan 04 '11 at 16:22
1

+1 for mentioning ASP changing the ID, but @ŠimeVidas is correct. They mention the JS is outside of the file. Alternatively, they can add a `` in the page and reference it in the other external script (if the script is called after page load). (`var error = document.getElementByID(lblErrorID);`) – Brad Christie Jan 04 '11 at 16:24
Thank you guys! You have been a terrific help! – Johnrad Jan 04 '11 at 17:33

score 6 · Answer 2 · answered Nov 20 '12 at 23:10

6

"hunter" gives a pretty solid way of doing things, however a, in my opinion far better method is to use the "CliendIDMode" property on the control and set that property to "Static". This will make the client and server IDs the same. Like this:

<asp:TextBox ID="ServerAndClientId" runat="server" ClientIDMode="Static" />

answered Nov 20 '12 at 23:10

Maverick

4,449
4
36
46

2

Wow thanks. But [this](http://stackoverflow.com/questions/6057490/is-there-any-drawback-to-set-clientidmode-static-on-every-object-set-on-main) post says there is some drawback in using this. – Arman Dec 14 '13 at 16:10
1

Yes, depending on the type of control it isn't always ideal. Overall I still prefer it however. Especially if you have all your javascript in external files (like a good boy or girl). – Maverick Dec 14 '13 at 23:10

score 2 · Answer 3 · answered Jan 04 '11 at 16:19

2

The ID of the label is not "lblError". The ASP.net engine changed the ID. Check the HTML source code in the browser to find out the real ID.

answered Jan 04 '11 at 16:19

Šime Vidas

182,163
62
281
385

@ŠimeVidas: I wouldn't recommend hard-coding the ID value as this can change based on container location. Given a page to be moderately static this would be fine, but in any future additions/redesigns, this could be an issue. – Brad Christie Jan 04 '11 at 16:28
@Brad Yes, hard-coding would be a bad idea. I don't do ASP.net but I remember having this issue, and I read about a feature that would let you define the ClientID directly. That would be the solution to this problem. – Šime Vidas Jan 04 '11 at 17:13

score 1 · Answer 4 · answered Jan 18 '13 at 14:36

You can use this:

document.getElementById('<%= lblError.ClientID %>').click()

Starting from ASP.NET 4.0 you can use ClientIDMode property for you element. And if you set it into Static then the ClientID value will be set to the value of the ID property:

 <asp:Label ID="lblError" runat="server" ClientIDMode="Static" />

will be rendered as something like this:

<span id="lblError" name="ctl00$MasterPageBody$ctl00$Label1" />

score 1 · Answer 5 · answered Jan 04 '11 at 16:21

That's not HTML for the label, that is an ASP.NET Control which will be rendered into HTML before it is sent in the response. ASP.NET WebForms controls sometimes change the id for the HTML they create.

View the source of the webpage to see what the id for the HTML element is on the rendered page.

getElementById not finding control generated by ASP.net

5 Answers5

Linked