2

I am having a bit of a problem with my jQuery steps. I would like to a add a custom button when I get to the last step. I have three steps. I am failing to get the current index.

$(document).ready(function () {
  $wizard = $("#wizard");
  $wizard.steps({
    onStepChanged: function (event, currentIndex, priorIndex) {
      var currentStep = $("#wizard").steps("getStep", currentIndex);
      if (currentStep == 2) {
        var $input = $('<input type="submit" value="test" />');
        $input.appendTo($('ul[aria-label=Pagination]'));
      }
    }
  });
});
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Jeche
  • 159
  • 2
  • 11

1 Answers1

3

In the onStepChanged it gives you the current (step) index - and the prior step should you need it.

You can simply use if(currentIndex === 2){...} to determine you're on the 3rd step (index implies it is zero-based).

The below demonstrates that this works for a simple 3 step wizard. Excuse the lack of styling!

$('#wizard').steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    onStepChanged: function (event, currentIndex, priorIndex) {
        if(currentIndex == 2){
          var $input = $('<input type="submit" value="test" />');
          $input.appendTo($('ul[aria-label=Pagination]'));
        }
        else {
           $('ul[aria-label=Pagination] input[value="test"]').remove();
        }
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.js"></script>
<div id="wizard">
    <h3>Page1</h3>
    <section>
        <p>Section1</p>
    </section>
    <h3>Page2</h3>
    <section>
        <p>Section2</p>
    </section>
    <h3>PAge3</h3>
    <section>
        <p>Section3</p>
    </section>
</div>
Jamiec
  • 133,658
  • 13
  • 134
  • 193
  • Thanks very much, now i am not sure of how can remove the fisnish button – Jeche May 02 '18 at 09:30
  • @Jeche it's sounding more like you just want to do something specific on finish... there's an even for `onFinishing` and `onFinished` for that. – Jamiec May 02 '18 at 09:32
  • okay i get you, but the finish button will not submit. i only to use the my custom button of type submit to save data to the database – Jeche May 02 '18 at 09:35
  • Cant you do that with an ajax request on finish? That would seem like a better solution – Jamiec May 02 '18 at 09:38
  • @Jeche check this: https://stackoverflow.com/questions/35805796/jquery-step-form-submit – Jamiec May 02 '18 at 09:39