3

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.

Genes Molina
  • 53
  • 1
  • 9
  • did you tried something or search something? – Arijit Mukherjee Jan 02 '18 at 13:35
  • Yeah. I added this code .addClass('disabled') to the – Genes Molina Jan 02 '18 at 13:55
  • 2
    I finally solved the problem myself.:) I added a class name .addClass('finish_button') and command $(".finish_button").prop("disabled", true); at the last line inside $(document).ready(function(). I also knew now how to enable the button by class. – Genes Molina Jan 02 '18 at 14:57

4 Answers4

1

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');
           }
        });
Gh0sT
  • 317
  • 5
  • 16
  • yeah, it's fine now. One last detail though; when you link your own websites, tools, and similar, you need to add disclosure that it is your repo. See [the help center](/help/promotion) for more info – Zoe Jan 18 '19 at 18:58
0

Try the option enableFinishButton inside the smartWizard.

Eg.:

$('#wizard').smartWizard({
    enableFinishButton: false
});
João Pedro Raldi
  • 124
  • 8
0

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.

Onesinus Saut
  • 314
  • 5
  • 18
0

You can hide buttons like this:

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

});
Salvatore
  • 10,815
  • 4
  • 31
  • 69
Muhammad Nouman
  • 1