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>