Back Button on multistep form

[morganrr]

Hi,
I am using this multi step setup for a form, but the only problem Im having is that you have to double click to go back(previous) in the middle of filling out the form and if you do that once then you have to double click to go forward. The logic for the counter is something I can’t get my head around. Im not great at javascript so any help is appreciated in advanced. Thanks

http://codepen.io/nodealpha/pen/jPXKEE

[Mottie]

Try this javascript (I changed a little in just about every block)

http://codepen.io/Mottie/pen/qZZQWd

// see https://css-tricks.com/forums/topic/back-button-on-multistep-form/
$(function() {
  var step = 0;
  var stepItem = $('.step-progress .step-slider .step-slider-item');

  $('.step-content .step-content-foot button[name="prev"]').addClass('out');

  // Step Next
  $('.step-content .step-content-foot button[name="next"]').on('click', function() {
    var instance = $(this);
    if (stepItem.length - 1 < step) {
      return;
    }
    $('.step-content .step-content-foot button[name="prev"]').removeClass('out');
    if (step == (stepItem.length - 2)) {
      instance.addClass('out');
      instance.siblings('button[name="finish"]').removeClass('out');
    }
    $(stepItem[step]).addClass('active');
    $('.step-content-body').addClass('out');
    step++;
    $('#' + stepItem[step].dataset.id).removeClass('out');
  });

  // Step Last
  $('.step-content .step-content-foot button[name="finish"]').on('click', function() {
    if (step == stepItem.length) {
      return;
    }
    $(stepItem[stepItem.length - 1]).addClass('active');
    $('.step-content-body').addClass('out');
    $('#stepLast').removeClass('out');
    step++;
  });

  // Step Previous
  $('.step-content .step-content-foot button[name="prev"]').on('click', function() {
    if (step - 1 < 0) {
      return;
    }
    step--;
    var instance = $(this);
    if (step <= (stepItem.length - 1)) {
      instance.siblings('button[name="next"]').removeClass('out');
      instance.siblings('button[name="finish"]').addClass('out');
    }
    $('.step-content-body').addClass('out');
    $('#' + stepItem[step].dataset.id).removeClass('out');
    if (step === 0) {
      stepItem.removeClass('active');
    } else {
      stepItem.filter(':gt(' + (step - 1) + ')').removeClass('active');
    }
    if (step - 1 < 0) {
      $('.step-content .step-content-foot button[name="prev"]').addClass('out');
    }
  });
});

[morganrr]

That worked! Thanks so much, it helped me out a lot

[chrisack]

Hi, this is my first time posting on here, not sure if anyone can help with this request. Is there a way to adapt this so that it is a 5 page form and the last page has a submit button? I tried changing it however if you get to the last step (step 5) and go to the previous step (step 4) and then back to last step again, it doesn’t display the content of the final step. Any suggestions would be greatly appreciated. I was hoping to have five steps and then when a person hits submit it would save the data and redirect to a success page.

Thanks.

[Mottie]

Hi @chrisack!

Please provide a demo of your set up – remove any private data – so we can see what you mean about the content of the final step. Thanks!

[chrisack]

Strange, I replied to this twice but it hasnt posted. Third time’s the charm.
This is my first time using codepen as well so I hope I set it up right. Looks like the examples above have the same results. I am also trying to style it so the steps are numbered so it looks a little rough right now. Any help or advice would be greatly appreciated.

Thanks.

[chrisack]

//codepen.io/chrisack/embed/preview/qRpKRb/?height=265&theme-id=0&default-tab=css,result&embed-version=2

[chrisack]

Hi, I hope this helps. It is also the first time I used codepen so I am not sure if I set it up right. It looks like the examples above are doing the same thing though. I am using Safari in case that matters. Still trying to do some styling as well to number the steps, so it looks a little rough right now.

http://codepen.io/chrisack/pen/qRpKRb/

[Author]

Posts