asked on

trouble referencing a button from Javascript

Here's ASP for a button.

<Tabor:ThemeButton runat="server" id="btnNext" button-causesvalidation="False" button-commandname="Redirect" button-onclientclick="nextClick();" button-text="Next >>" button-tooltip="Goto Next Tab"></Tabor:ThemeButton>

I'm trying to reference it in javascript using the code shown below but my btnNext var is always NULL. What am I doing wrong?

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

Tom Beck

Are you trying to reference the button before it exists on the page? If your script is in the head of the page and not inside a function, it will run before the button is rendered on the page and thus will be null when the alert is triggered.

HLRosenberger

ASKER

It is in a function. What I actually have is a "Next" button, like with a Wizard. When I get to the last area of the Wizard, I want to disable the Next button.

Tom Beck

On the rendered page, does <%= btnNext.ClientID %> resolve to the button id or does it leave a blank?

HLRosenberger

ASKER

What do you mean? is the button actually rendered and I can see it? Yes.

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

HLRosenberger

ASKER

Ah, that's the ticket! In view source it's ID = "ctl00_PageContent_btnNext__Button"

So, this code works;

var btn = document.getElementById("ctl00_PageContent_btnNext__Button");

Thanks!

HLRosenberger

ASKER

thanks

Tom Beck

Thanks for the points.

Be careful with that approach. You are circumventing asp.net's authority to create unique ids as it deems necessary. It will work and may continue working for the life of the application. But it may stop working after an asp.net version upgrade if Microsoft decides to change the way it auto-generates unique ids. What confuses me is if this line:

var btnNext = document.getElementById("<%= btnNext.ClientID %>");

is being rendered as:

var btn = document.getElementById("ctl00_PageContent_btnNext__Button");

then why is it not working the way you had it?