jquery steps - want to show the next button at the last step

Question

I have a simple wizard that only needs a 'previous' and 'next' button. On the the third and final step, the next button launches a file uploader.

So far, I have this:

I did this to make it easier to reference the buttons themselves.

$( document ).ready(function() {

  $("#wizard .actions a[href='#next']").attr("id","next_button");
  $("#wizard .actions a[href='#previous']").attr("id","previous_button")

 });

Then here's the body of my code:

  $("#wizard").steps({

 bodyTag: "section",
 transitionEffect: "slideLeft",
 autoFocus: true,
 enableFinishButton: false,
  enableCancelButton: false,

 onStepChanged: function (event, currentIndex, priorIndex) {


      if (currentIndex ==2 ) {
          console.log('currentIndex is:'+currentIndex);
               //this returns '2' which is correct

        $("#next_button").show();
        $(function(){
            $("#next_button").click(function(){
                //custom function here
            });
        });

When I get to the third step (currentIndex = 2), the next step button disappears so I tried to do a $("#next_button").show(); but that does not work.

Any help, much appreciated!

Answer 1

it disappears because you set it to do so by addingenableFinishButton: false so, you should remove that and simply change the text of the last step's button to "next" instead of "finish" from the labels

labels: {
    finish: "Next"
}

The last button will have this href

<a href="#finish" role="menuitem">Next</a>

So, you can either add a custom ID to it as you did to the next and previous buttons. or you can simply use something like this

$('a[href="#finish"]').click(function() {
     //custom function here
});

Which will run your custom function on last "Next" button's click. Without needing to check the step or anything.

Hope that helps.