如何防止 e.preventDefault() 被無限調用？

Question

<form id="form1" name="form1" action="/action_page.php">
  <label for="menu">Choose option:</label>
  <select name="menu" id="menu">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
  <br><br>
  <input type="hidden" id="additional_field" name="custId" value="3487">
  <input type="submit" value="Submit">
</form>

<form id="form2" name="form2" action="">
  <label for="additional_field">Additional field:</label><br>
  <input type="text" id="additional_field" name="additional_field" value=""><br>
  <input type="submit" value="Submit">
</form> 

我有 2 個 forms：

• form1 是主窗體
• form2 是隱藏的彈出模式

規則：

• 如果訪問者在 form1 中選擇 option1，則照常繼續提交表單。 在這兒無事可做。
• 如果訪問者在 form1 處選擇 option2，則停止 form1 提交並顯示 form2 模態，因為我們需要額外的字段。 訪客填寫后點擊form2提交。 我們將繼續提交form1，包括form2中的additional_field作為form1中的附加參數。
• 如果訪問者在 form1 中選擇 option2，則提交 form1 的唯一方法是訪問者單擊 form2 上的提交按鈕。

jquery 邏輯實現這一目標的最佳方式是什么？ 從form2提交時如何確保e.preventDefaut沒有被調用兩次？

我試過這個，但失敗了：

$("#form1").submit(function(e){

    if( $('#menu').val() == 'option2' ){
        //show modal here
       e.preventDefault();
       return false;
    }

});
$("#form2").submit(function(e){
    var additional_field = $('#additional_field').val();
    $("#form1").append('<input type="hidden" name="additional_field" value="' + additional_field + '" />')
    $('#form1').submit();
});

Answer 1

在這里， form2Filled是一個用false初始化的標志。 提交表格 1 時：

1. 如果選擇了選項 1，如果條件為 false，則提交表單。

2. 如果選擇了選項 2，如果條件產生true ，則顯示模態。

3. 當 Form 2 被填寫時， form2Filled變為true ，並提交 form 1，如果條件為 false ，則提交 form 1。

 var form2Filled = false;
 var form1 = $("#form1");

 form1.submit(function(e) {
   if (!form2Filled && $('#menu').val() == 'option2') {
      //show modal here
      e.preventDefault();
      return false;
   }
 });


 $("#form2").submit(function(e) {
   form2Filled = true;
   var additional_field = $('#additional_field').val();
   form1.append('<input type="hidden" name="additional_field" value="' + additional_field + '" />')
   form1.submit();
 });

另外：您可以將檢索到的元素分配給一個變量，並使用該變量，而不是一次又一次地使用$("#form1") 。 它提高了效率，是一種很好的做法。 :)