CODEWITHSUNDEEP
javascriptdojo
Yogesh
Yogesh

Reputation: 35

How to disabled "Next" button of wizardpane in DOJO

I am using dojo 1.5. I am creating a sample wizard. Below is code 

    <div class="floater">
    <p>This example shows a wizard with customized button labels.</p>

    <div id="wizard1" dojoType="dojox.widget.Wizard" hideDisabled="true" previousButtonLabel="test" nextButtonLabel="Go on" doneButtonLabel="Finish">
        <div dojoType="dojox.widget.WizardPane"  >
            // Here some html form , User has to fill all information
        </div>
        <div dojoType="dojox.widget.WizardPane">
            <h1>Tab 2</h1>
        </div>
        <div dojoType="dojox.widget.WizardPane">
            <h1>Tab 3</h1>

            You won't be able to come back, but you can finish now...

        </div>
        <div dojoType="dojox.widget.WizardPane" >
            <h1>Tab 4</h1>

            ... and now you can't go back.
        </div>
        <div dojoType="dojox.widget.WizardPane"  doneFunction="done" >
            <h1>Tab 5</h1>
            ... and now you can finish up.

        </div>


    </div>
</div>

I want to hide next button which has label "Go on" for first pane of wizard til user fill all information from first pane. So can you please suggest how to disabled "Next" button from wizard when it was initially loaded.

Upvotes: 2

Views: 1324

Answers (1)

Frode
Frode

Reputation: 5710

I don't know exactly what the best way to do this is. If you use dijit.form.Form, you can use its onValidStateChange method, and toggle the button enabled/disabled there.

var toggleWizardButton = function(valid) {
    dijit.byId("theWizard").nextButton.set("disabled",!valid);
    //if(valid) { /* enable "Go on" button here.. */ }
    //else      { /* opposite.. */ }
};
var form = dijit.byId("theFormInWizardPane1"),
    wiz1 = dijit.byId("theWizard");

dojo.connect(form, "onValidStateChange", toggleWizardButton);
wiz1.nextButton.set("disabled",true); // button disabled by default

Example fiddle: http://jsfiddle.net/VQM2k/1/

An alternative, possibly better way, is to just use the WizardPane's passFunction, which when returning false, will prevent the wizard from moving forward. In it, you can get the form and check whether it is valid or not (kind of like your other question :) ).

<div dojoType="dojox.widget.WizardPane" passfunction="passfunction" >
    // Here some html form , User has to fill all information<br/><br/>
    <form id="myForm" dojoType="dijit.form.Form">
        Name: <input dojoType="dijit.form.ValidationTextBox" required="true" />
    </form>
</div>

The passfunction can simply be something like this:

var passfunction = function() {
    var form = dijit.byId("myForm");
    return form && form.validate();
};

Fiddle: http://jsfiddle.net/VQM2k/

Upvotes: 1

Related Questions