javascript - Html form - reviewing and changing information -

i have type of checkout page asks users payment information, click on review button takes them new "panel" review information can go , change if needed, has happen in same page, have "information-panel" div changes "information-review-panel" via jquery once button clicked, this:

$(document).ready(function () {      $("form").submit(function () {          //save values form fields          var fn = $("#first_name").val() + " " + $("#last_name").val();          var cc = $("#credit_card").val();                    //switch panels          $("div.information-panel").replacewith($("div.information-review-panel"));          $("div.information-review-panel").fadein(1000);                  //place values in new panel          $("#review-name").html(fn);          $("#review-card").html(cc);      });  });

<div class="information-panel">    <div class="form-line">      <div class="col-md-4">        <label for="first_name">first name</label>        <input class="form-control" id="first_name" type="text" placeholder="first name" required>      </div>      <div class="col-md-4">        <label for="last_name">last name</label>        <input class="form-control" id="last_name" type="text" placeholder="last name" required>      </div>      <div class="col-md-4">        <label for="credit_card">credit card number</label>        <input class="form-control" id="credit_card" type="text" placeholder="card number" required>      </div>    </div>  </div>    <div id="step_nav">      <input type="submit" class="blue-button next" value="review">  </div>      <div class="information-review-panel">    <h2>review panel</h2>    <h4>please review information below:</h4>    <div class="amount">      <h3>         <b>name:</b><span id="review-name"></span>       </h3>      <h3>         <b>credit card number:</b><span id="review-card"></span>       </h3>    </div>

as can see first issue review button submits form, because it's way know of validating information on form, don't want submit form before reviewing , being able go edit info. question be, how can move , forth between 2 panels , validate data on form without submitting form? i'm not sure if angularjs option can't use this. appreciated.

you don't have submit form when click on review, instead show submit button in review panel.

check https://jsfiddle.net/mrdahdoul/mvq0w8t9/61/

<div class="alert">fill fields</div> <div class="information-panel">   <div class="form-line">     <div class="col-md-4">       <label for="first_name">first name</label>       <input class="form-control" id="first_name" type="text" placeholder="first name" required>     </div>     <div class="col-md-4">       <label for="last_name">last name</label>       <input class="form-control" id="last_name" type="text" placeholder="last name" required>     </div>     <div class="col-md-4">       <label for="credit_card">credit card number</label>       <input class="form-control" id="credit_card" type="text" placeholder="card number" required>     </div>   </div> </div>  <div id="step_nav">   <button id="review" class="blue-button next">review</button> </div>   <div class="information-review-panel">   <h2>review panel</h2>   <h4>please review information below:</h4>   <div class="amount">     <h3>        <b>name:</b><span id="review-name"></span>      </h3>     <h3>        <b>credit card number:</b><span id="review-card"></span>      </h3>   </div>    <div id="step_nav_rev">     <button id="back" class="blue-button next">back</button>     <input type="submit" class="blue-button next" value="submit">   </div> </div>  <script> $(document).ready(function() {   $("#review").click(function() {     var first = $("#first_name").val();     var last = $("#last_name").val();     var card = $("#credit_card").val();     if (first.trim() == '' || last.trim() == '' || card.trim() == '') {       $(".alert").show();     } else {       $(".alert").hide();       $(".information-panel").fadeout();       $(".information-review-panel").fadein();       $(this).fadeout();       $("#review-name").text(first + " " + last);       $("#review-card").text(card);     }   });    $("#back").click(function() {     $(".information-panel, #review").fadein();     $(".information-review-panel").fadeout();   }); }); </script>