CODEWITHSUNDEEP
jquerysmart-wizard
Genes Molina
Genes Molina

Reputation: 53

Disable Finish button for jQuery Smart Wizard 4

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.

Upvotes: 3

Views: 10435

Answers (4)

Gh0sT
Gh0sT

Reputation: 317

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');
           }
        });

Upvotes: 1

Muhammad Nouman
Muhammad Nouman

Reputation: 1

You can hide buttons like this:

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

});

Upvotes: 0

Onesinus Saut
Onesinus Saut

Reputation: 344

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.

Upvotes: 0

Jo&#227;o Pedro Raldi
Jo&#227;o Pedro Raldi

Reputation: 144

Try the option enableFinishButton inside the smartWizard.

Eg.:

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

Upvotes: 0

Related Questions