how to fix jQuery 'previous' button

user_11212597 0
Viewed 36

The code below shows a multi step form, the second page displays two buttons next and previous and for some reason the previous button doesn't work. I tried playing with code a lot but I couldn't figure it out. Please help.

<form class="form-wrapper">
        <fieldset class="section is-active">
          <h3>Details</h3>
          <div class="inputlabel">
           <label>Exchange</label>
           </div>
          <input type="text" placeholder="Exchange..">
          
          <div class="button">Next</div>
        </fieldset>
        
        <fieldset class="section">
          <h3>Title</h3>
          <div class="inputlabel">
          <label>Balance</label>
          </div>
          <input type="text" placeholder="Password" readonly>

           
          <div class="btnpre" onclick="prvbtn()" id="btnprevious">Previous</div>
          <input class="submit button" type="submit" value="Finish">
        </fieldset>
        <fieldset class="section">
          <i class="fas fa-check-circle fa-7x"></i>
          <h2>Saved</h2>
          <p>Your Data has been saved</p>
          <div class="button" id="button2">Close</div>

        </fieldset>
      </form>

This is the jQuery script

 <script>
      $(document).ready(function(){
  $(".form-wrapper .button").click(function(){
    var button = $(this);
    var currentSection = button.parents(".section");
    var currentSectionIndex = currentSection.index();
    var headerSection = $('.steps li').eq(currentSectionIndex);
    currentSection.removeClass("is-active").next().addClass("is-active");
    headerSection.removeClass("is-active").next().addClass("is-active");


    $(".form-wrapper").submit(function(e) {
      e.preventDefault();
    });

    function prvbtn(){
      if(currentSectionIndex === 1){
        currentSectionIndex = 0;

    }

    if(currentSectionIndex === 2){
      $(document).find(".form-wrapper .section").first().addClass("is-active");
      $(document).find(".steps li").first().addClass("is-active");
    }
  });
});
    </script>
html jquery
1 Answers

Consider the following example.

$(function() {
  // Define a Global Index
  var sectionIndex = 0;

  $(".form-wrapper .button").click(function() {
    // Examine the button and determine which button was clicked
    if ($(this).hasClass("next")) {
      // Use the current Index and them increment it
      $(".section").eq(sectionIndex++).toggleClass("is-active");
      $(".section").eq(sectionIndex).toggleClass("is-active");
    } else {
      // Use the current Index and them decrement it
      $(".section").eq(sectionIndex--).toggleClass("is-active");
      $(".section").eq(sectionIndex).toggleClass("is-active");
    }
  });

  $(".form-wrapper").submit(function(e) {
    e.preventDefault();
  });
});
.section {
  display: none;
}

.section.is-active {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-wrapper">
  <fieldset class="section is-active">
    <h3>Details</h3>
    <div class="inputlabel">
      <label>Exchange</label>
    </div>
    <input type="text" placeholder="Exchange..">
    <div class="next button">Next</div>
  </fieldset>
  <fieldset class="section">
    <h3>Title</h3>
    <div class="inputlabel">
      <label>Balance</label>
    </div>
    <input type="text" placeholder="Password" readonly>
    <div class="previous button" id="btnprevious">Previous</div>
    <input class="submit button" type="submit" value="Finish">
  </fieldset>
  <fieldset class="section">
    <i class="fas fa-check-circle fa-7x"></i>
    <h2>Saved</h2>
    <p>Your Data has been saved</p>
    <div class="button" id="button2">Close</div>
  </fieldset>
</form>

This assigns one callback to all button elements. With an if statement, we can easily determine the direction.

user_4633190
Related