Multi step form

Question

Theres a multi smtp form I found online . However the next and previous buttons are embedded into each fieldset and I would like them to be outside of the fieldset so they can be used for all the sets. Not just one.

And for the last one I'd .show() the submit button. As well as hide the previous button for the very first one.

Can this be done?

---

<fieldset>
<input type="text" name="firstname" placeholder="First Name">

<input type="button" name="next" class="next" value="Next">
</fieldset>

<fieldset>
<input type="text" name="lastname" placeholder="Last Name">

<input type="button"name="previous" class="previous" value="Previous">
<input type="button" name="next" class="next" value="Next">
</fieldset>


<fieldset>
<input type="text" name="email" placeholder="E-mail">

<input type="button" name="previous" class="previous" value="Previous">
<input type="submit" name="submit" value="Submit">
</fieldset>

---

$(document).ready(function(){


  var current = 1,current_step,next_step,steps;

  steps = $("fieldset").length;

  $(".next").click(function(){

    current_step = $(this).parent();
    next_step = $(this).parent().next();
    next_step.show();
    current_step.hide();

    setProgressBar(++current);
  });



  $(".previous").click(function(){

    current_step = $(this).parent();
    next_step = $(this).parent().prev();
    next_step.show();
    current_step.hide();

    setProgressBar(--current);
  });

  setProgressBar(current);
});

Answer 1

You just need to keep track of the fieldsets and the current position.

Then, wrapping them in jQuery calls everything is easy. See this example, based on your code:

 $(document).ready(function() { var current = 0, $form = $("form"), $steps = $form.find("fieldset"), numSteps = $steps.length; function setProgressBar(pos) { console.log("Step: " + pos); } function checkButtons() { if (current <= 0) { $(".prev").hide(); } else { $(".prev").show(); } if (current >= numSteps - 1) { $(".next").hide(); $(".submit").show(); } else { $(".next").show(); $(".submit").hide(); } } $(".next").click(function() { $($steps[current]).hide(); $($steps[++current]).show(); setProgressBar(current); checkButtons(); }); $(".prev").click(function() { $($steps[current]).hide(); $($steps[--current]).show(); setProgressBar(current); checkButtons(); }); checkButtons(); setProgressBar(current); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <fieldset> <input type="text" name="firstname" placeholder="First Name"> </fieldset> <fieldset style="display:none"> <input type="text" name="lastname" placeholder="Last Name"> </fieldset> <fieldset style="display:none"> <input type="text" name="email" placeholder="E-mail"> </fieldset> </form> <input type="button" style="display:none" name="prev" class="prev" value="Previous"> <input type="button" style="display:none" name="next" class="next" value="Next"> <input type="submit" style="display:none" name="submit" class="submit" value="Submit"> 

You also need to take care of the visibility of the buttons, which is what the checkButtons function is for. I am sure more elegant approaches are possible, but this one works.

Also note the display: none styles on the elements which are hidden at start.