Home › Forums › JavaScript › Back Button on multistep form
- This topic is empty.
-
AuthorPosts
-
March 8, 2016 at 11:04 am #238849
morganrr
ParticipantHi,
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. ThanksMarch 9, 2016 at 1:36 pm #238891Mottie
MemberTry 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'); } }); });
March 9, 2016 at 1:51 pm #238892morganrr
ParticipantThat worked! Thanks so much, it helped me out a lot
January 30, 2017 at 9:13 am #250712chrisack
ParticipantHi, 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.
January 30, 2017 at 9:44 am #250713Mottie
MemberHi @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!
January 30, 2017 at 11:45 am #250717chrisack
ParticipantStrange, 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.
January 30, 2017 at 11:46 am #250718chrisack
ParticipantApril 19, 2017 at 6:44 am #250714chrisack
ParticipantHi, 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.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.