Html表单 - 审查和更改信息

Question

我有一个结帐页面，要求用户提供他们的付款信息，然后他们点击一个Review按钮，他们会将他们带到一个新的“面板”来查看他们可以查看的所有信息返回并根据需要进行更改，这必须发生在同一页面中，所以我有一个“信息面板”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

这似乎是一个可能的解决方案，您的审查按钮提交表单将阻止按钮的默认操作。 IE，而不是让面板出现在提交，对于以事件作为参数的审阅按钮具有点击功能，那么您可以简单地执行event.preventDefault();以停止提交按钮的正常功能并提出新的小组。

在新的面板，然后你可以有一个新的按钮，提交的实际信息，或者一个按钮，允许他们编辑等

Answer 2

更换这些线路：

这一个：

<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() { 

然后，在这个函数结束...也许做$("form").submit();。

Answer 3

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

检查这个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>