Question

I want to hide the Next button on my ASP.NET Wizard control using JavaScript. Can anybody tell me if this is possible and post a javascript snippet on how to do this? Thanks!

Answer 1

2 options here…

1. TemplatedWizardStep – that way you create the buttons yourself and can then use either the control name or a css class on the button to turn it on & off with javascript or jQuery.
2. use StartNextButtonStyle to set a css class on your next button so you can grab the button with jQuery. Example of this one is below (I’m checking to see whether a checkbox is checked before enabling the button)

Wizard markup…

<asp:Wizard ... >
    <StartNextButtonStyle CssClass="StandardButton StartNextButton" />
    <WizardSteps>
        <asp:WizardStep runat="server" ID="AgreementStep" StepType="Start">
            <asp:CheckBox runat="server" ID="AcceptAgreement" Text="I agree to the agreement terms." TextAlign="Left" onclick='EnableNextButton();' CssClass="NormalTextBox AcceptedAgreement" />
        </asp:WizardStep>
    </WizardSteps>
</asp:Wizard>

Javascript (using jQuery) to enable/disable the next button:

<script type="text/javascript">

    function EnableNextButton() {

        var button = jQuery(".StartNextButton")
        var checkBox = jQuery(".AcceptedAgreement input:checkbox");

        if (checkBox.is(':checked'))
            button.removeAttr("disabled");
        else
            button.attr("disabled", "disabled");

    }

</script>