Disable Finish button for jQuery Smart Wizard 4

Question

I have a problem on disabling the "Finish" button on jQuery Smart Wizard 4. The example given in the site has the button enabled by default.

It should have the Finish button disabled by default and should enable only once it reaches the last step. How should I disable and enable the button?

Thank you very much.

Answer 1

You can hide buttons like this:

$("#smartWizard").smartWizard({
toolbarSettings: {
    showPreviousButton : false // To hide Previous Button
   }

});

Answer 2

Try the option enableFinishButton inside the smartWizard.

Eg.:

$('#wizard').smartWizard({
    enableFinishButton: false
});

Answer 3

Hei,

I just found this solutions, just add this simple code in every step in wizard

if($('button.sw-btn-next').hasClass('disabled')){
            $('.sw-btn-group-extra').show(); // show the button extra only in the last page
        }else{
            $('.sw-btn-group-extra').hide();                
        }

Here Is The Full Code :

$("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection) {
        if($('button.sw-btn-next').hasClass('disabled')){
            $('.sw-btn-group-extra').show(); // show the button extra only in the last page
        }else{
            $('.sw-btn-group-extra').hide();                
        }

      });

The Explanation is so simple,showStep function handle every step in wizard ( from step 1 to 2, etc ) Then we just need to check is button with class btn-next(class next button) has disabled class, as we know the next button disabled when the page is last.

Hope this help.

Answer 4

Here's an example modal with the buttons as requested.

Taking https://github.com/techlab/SmartWizard/blob/master/examples/smartwizard-modal.html as an example.
Add three buttons to the modal footer:

    <div class="modal-footer">
      <button class="btn btn-secondary" id="prev-btn" type="button">Previous</button>
      <button class="btn btn-secondary" id="next-btn" type="button">Next</button>
      <button class="btn btn-primary" id="finish-btn" type="submit">Finish</button>
    </div>

and edit the js logic to show/hide the buttons:

        $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
           if(stepPosition === 'first'){
               $("#prev-btn").addClass('disabled');
               $("#finish-btn").hide();
           }else if(stepPosition === 'final'){
               $("#next-btn").hide();
               $("#finish-btn").show();
           }else{
               $("#finish-btn").hide();
               $("#next-btn").show();
               $("#prev-btn").removeClass('disabled');
           }
        });