Question

我有一种结帐页面询问用户的付款信息，然后他们点击“查看”按钮，将他们带到一个新的“面板”，查看他们可以返回的所有信息，如果需要可以更改，这必须发生在同一页面中，所以我有一个“信息面板”div，一旦单击按钮，就会通过jquery更改为“information-review-panel”，如下所示：

$(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>

正如您所看到的，我的第一个问题是Review按钮实际上提交了表单，这是因为这是我知道验证表单上信息的唯一方法，但显然我不想在审核之前提交表单它能够返回编辑任何信息。所以我的问题是，如何在两个面板之间来回移动并验证表单上的数据而不实际提交表单？我不确定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>

Answer 2

似乎是您的审核按钮提交表单的可能解决方案将阻止按钮的默认操作。 IE浏览器不是让面板显示在提交上，而是具有事件作为参数的评论按钮的点击功能，那么您只需执行{{ 1}}以便停止提交按钮的正常功能并调出新面板。

在新面板上，您可以拥有一个提交实际信息的新按钮，或一个允许他们编辑的按钮等。

Answer 3

替换这些行：

这一个：

event.preventDefault();

由此：

<input type="submit" class="blue-button next" value="review">

这一个：

<input type="button" id="modifyInputs" class="blue-button next" value="review">

由此：

$("form").submit(function () {

然后，在此功能结束时......也许做$("#modifyInputs").click(function () {。

Html表单 - 审查和更改信息

3 个答案: