I am using the SmartWizard plugin to create a wizard form to enter new user details. I have a custom "Submit" button that is supposed to be disabled until the user reaches Step 5, the last step of the form.

Via SmartWizard's leaveStep function I should be able to track when the current slide changes to Step 5, but this turns out to be super unreliable and buggy. Half the time the button doesnt get activated when switching from Step 4 to Step 5, but then again gets activated when I switch from Step 5 back to Step 4. If I refresh and go from Step 1 > 2 > 3 > and reach 4, it doesnt activate.

Can anyone advise whats wrong here please?

Thanks

SmartWizard

$('#smartwizard').smartWizard({
    selected: 0, // Initial selected step, 0 = first step
    theme: 'default', // theme for the wizard, related css need to include for other than default theme
    justified: true, // Nav menu justification. true/false
    darkMode: false, // Enable/disable Dark Mode if the theme supports. true/false
    autoAdjustHeight: true, // Automatically adjust content height
    cycleSteps: false, // Allows to cycle the navigation of steps
    backButtonSupport: true, // Enable the back button support
    enableURLhash: false, // Enable selection of the step based on url hash
    // onFinish: onFinishCallback,
    // onCancel: onCancelCallback,
    transition: {
        animation: 'fade', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
        speed: '400', // Transion animation speed
        easing: '' // Transition animation easing. Not supported without a jQuery easing plugin
    },
    toolbarSettings: {
        toolbarPosition: 'bottom', // none, top, bottom, both
        toolbarButtonPosition: 'center', // left, right, center
        showNextButton: true, // show/hide a Next button
        showPreviousButton: true, // show/hide a Previous button
        toolbarExtraButtons: [
            $('<button id="newUserSubmit"  disabled><i ></i> Submit</button>')
        ] // Extra buttons to show on toolbar, array of jQuery input/buttons elements
    },
    anchorSettings: {
        anchorClickable: false, // Enable/Disable anchor navigation
        enableAllAnchors: false, // Activates all anchors clickable all times
        markDoneStep: false, // Add done state on navigation
        markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
        removeDoneStepOnNavigateBack: false, // While navigate back done step after active step will be cleared
        enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
    },
    keyboardSettings: {
        keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
        keyLeft: [37], // Left key code
        keyRight: [39] // Right key code
    },
    lang: { // Language variables for button
        next: 'Next >',
        previous: '< Previous'
    },
    disabledSteps: [], // Array Steps disabled
    errorSteps: [], // Highlight step with errors
    hiddenSteps: [] // Hidden steps
});

LeaveStep event

$("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {

    // enable Submit button only on last step
    if (stepNumber == 4) {
        $('#newUserSubmit').prop('disabled', false);
    } else {
        $('#newUserSubmit').prop('disabled', true);
    }

});

Edit: to clarify why the step counter in the code says 4. SmartWizard counts the First Step as [0], Second Step as [1], Third Step as [2], etc. My Fifth and Final Step would be [4].

CodePudding user response：

$(function () {
    $('#smartwizard').smartWizard({
        toolbarSettings: {
            toolbarExtraButtons: [
                $('<button id="submitButton"  disabled="disabled">Finish</button>')
            ]
        }
    }).on("stepContent", function (e, anchorObject, stepIndex, stepDirection) {
        $('#submitButton').prop('disabled', stepIndex !== 3);
    });
});

// the stepIndex value shows correct at "stepContent" event only ( may be it has some other functionality on other events )

// in this example there are 4 steps ( index starts with 0 ends with 3 )