Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Back Button on multistep form

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #238849
    morganrr
    Participant

    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

    #238891
    Mottie
    Moderator

    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');
        }
      });
    });
    
    #238892
    morganrr
    Participant

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

    #250712
    chrisack
    Participant

    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.

    #250713
    Mottie
    Moderator

    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!

    #250717
    chrisack
    Participant

    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.

    #250718
    chrisack
    Participant
    #250714
    chrisack
    Participant

    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/

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.