I can get the next button to work but not the previous button. What am I doing wrong?

Question

I am trying to create a multi step form using jQuery. I have got the next button to work and show the next fieldset but I can't get the previous button to show the previous fieldset. I am very to this so any help would be greatly appreciated.

<form action="">
  <fieldset>
    <h2>First Name</h2>
    <input type="text" name="firstname" placeholder="First Name" />
    <input
      type="button"
      name="next"
      class="next action-button"
      value="Next"
    />
  </fieldset>
  <fieldset>
    <h2>Last Name</h2>
    <input type="text" name="lastname" placeholder="Last Name" />
    <input
      type="button"
      name="prev"
      class="previous action-button"
      value="Previous"
    />
    <input
      type="button"
      name="next"
      class="next action-button"
      value="Next"
    />
  </fieldset>
  <fieldset>
    <h2>Email</h2>
    <input type="text" name="email" placeholder="Email" />
    <input
      type="button"
      name="previous"
      class="previous action-button"
      value="Previous"
    />
    <input
      type="button"
      name="submit"
      class="submit action-button"
      value="Submit"
    />
  </fieldset>
</form>

$(document).ready(function() {
  $(".next").click(function() {
    current_fs = $(this).parent();
    next_fs = $(this).parent().next();
    next_fs.show();
  });
});

$(".previous").click(function() {
  current_fs = $(this).parent();
  previous_fs = $(this).parent().prev();
  previous_fs.show();
});

Answer 1

An alternative is to keep the two operations in a single method out of the <fieldset> . And use only two buttons to navigate. Then use an active class, for the <fieldset> to display.

The actions of the buttons would be like this:

$(document).ready(function() {
  $('.next, .prev').click(function(e) {
    e.preventDefault();
    current = $('fieldset.active');
    $(current).removeClass('active').hide();

    nextPrev = $(this).hasClass('next') ? $(current).next() : $(current).prev();

    $(nextPrev).addClass('active').show();
  });
});

Answer 2

$(".previous") is outside of $(document).ready so it's looking for the html tags before they are set. Move it inside the callback of $(document).ready and you should be set.

Answer 3

Use classes to toggle active state for various reasons, but in your case for the sake of simplicity.

Give your buttons name attribute a value of either next or prev so you can make use of these values in your direction logic.

When .next or .previous buttons are clicked, find the next target (using the next and prev directional values we set on the buttons earlier), remove the current active state and apply to new element.

 $(function() { var active = $('fieldset.active') $('.next, .previous').click(function(e) { e.preventDefault(); var target = $(this).closest('fieldset')[this.name](); if (target.length) { active.removeClass('active'); target.addClass('active'); active = target; } }); });

 fieldset { display: none; } fieldset.active { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action=""> <fieldset class="active"> <h2>First Name</h2> <input type="text" name="firstname" placeholder="First Name" /> <input type="button" name="next" class="next action-button" value="Next" /> </fieldset> <fieldset> <h2>Last Name</h2> <input type="text" name="lastname" placeholder="Last Name" /> <input type="button" name="prev" class="previous action-button" value="Previous" /> <input type="button" name="next" class="next action-button" value="Next" /> </fieldset> <fieldset> <h2>Email</h2> <input type="text" name="email" placeholder="Email" /> <input type="button" name="prev" class="previous action-button" value="Previous" /> <input type="button" name="submit" class="submit action-button" value="Submit" /> </fieldset> </form>