javascript - Html 表单 - 查看和更改信息

Question

我有一种结帐页面，要求用户提供付款信息，然后他们单击“审核”按钮，将他们带到一个新的“面板”以审核所有信息，然后他们可以根据需要返回并更改这些信息，这必须发生在同一页面中，所以我有一个“信息面板”div，一旦单击按钮，它就会通过 jquery 更改为“信息审查面板”，如下所示:

$(document).ready(function () {
    $("form").submit(function () {
        //Save values from the 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 the 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 your 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>

正如您所看到的，我的第一个问题是“审阅”按钮实际上提交了表单，这是因为这是我知道验证表单上的信息的唯一方法，但显然我不想在审阅之前提交表单并且能够返回编辑任何信息。所以我的问题是，如何在两个面板之间来回移动并验证表单上的数据而不实际提交表单？我不确定 AngularJS 是否是一个选项，但我不能用它来做这个。非常感谢任何帮助。

Answer 1

点击审核时不必提交表单，而是在审核面板中显示提交按钮。

检查这个https://jsfiddle.net/MrDahdoul/mvq0w8t9/61/

<div class="alert">Fill all 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 your 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>