Disable buttons onclick in asp wizard

Question

I have an asp wizard on my page with three steps.

<asp:Wizard ID="wizardBestellen" runat="server" ActiveStepIndex="0" DisplaySideBar="False" onfinishbuttonclick="wizard_NextButtonClick" onnextbuttonclick="wizard_NextButtonClick" onpreviousbuttonclick="wizard_PreviousButtonClick">
          <StartNavigationTemplate></StartNavigationTemplate>
          <StepNavigationTemplate></StepNavigationTemplate>
          <FinishNavigationTemplate></FinishNavigationTemplate>
          <WizardSteps>
            <asp:WizardStep runat="server" ID="step1" StepType="Start">
              <uc1:control ID="uc1" runat="server" />
            </asp:WizardStep>
            <asp:WizardStep runat="server"ID="step2" StepType="Step">
              <uc2:control ID="uc2" runat="server" />
            </asp:WizardStep>
            <asp:WizardStep ID="step3" runat="server" StepType="Finish">
              <uc3:control ID="uc3" runat="server" />
            </asp:WizardStep>
          </WizardSteps>
        </asp:Wizard>

Now every control has a next and a previous button which after the click validates your data and sends you to the next step. The buttons all look like:

<asp:LinkButton ID="bntPrevious" runat="server" CommandName="MovePrevious" CssClass="buttonOrange" CausesValidation="false"><span>Previous</span></asp:LinkButton>
<asp:LinkButton ID="btnNext" runat="server" CommandName="MoveNext" CssClass="buttonOrange" CausesValidation="true"><span>Next</span></asp:LinkButton>

So far it all works perfectly.. Now i wanted to disable the buttons after clicking on it and show a div with a loader image. So i created a div named divLoader and a javascript function which hides the div the buttons are in and shows the div with the loader.

function ToggleDiv(divButton, divLabel)
{

        if (divButton.style.display == 'block')
        {
            divButton.style.display = 'none';
            divLabel.style.display = 'block';
        }
        else
        {
            divButton.style.display = 'block';
            divLabel.style.display = 'none';
        }
}

But i can't get this to work. The ToggleDiv function works great in another situation, so thats not the problem. I've tried calling the function from the OnClick attribute in the linkbutton but this gave me an error. I tried the OnClientClick, but this didn't work and i also tried setting the onclick attribute in the code behind, this also was a dead end.

Can anybody explain to me what i am doing wrong or is there another way to prevent users clicking the button twice?

Answer 1

Sounds like you're not getting the binding to work.

The first thing I would do is check the emitted control IDs by doing a view-source. Some implementation of the .NET framework add extra fluff to these control IDs, so can't guarantee that it will be the same as appears on the form.

Next, I would try some JavaScript late binding. If you have a JavaScript file, put it there. If not create one or add a JavaScript block to the foot of your form (create a new file for preference).

All this would be much easier with a JAvaScript lbrary such as jQuery, but for the moment lets assume you don't have one.

Add a window onload event handler

window.onload = function(){
    //code to go here
}

Now add the click binding for your button:

window.onload = function(){
    document.getElementById("***YOUR BUTTON ID***").onclick = function(){
        ToggleDiv(this, document.getElementById("***YOUR LABEL ID***"));
    }
}

I said this would be a little easer with jQuery, well, this is the equivalent implementation:

$(document).ready(function(){
    $("#***YOUR BUTTON ID***").click(function(){
        $(this).toggle();
        $("#***YOUR LABEL ID***")).toggle();
    });
});

The above sample removes the need for your ToggleDiv function entirely.