如何防止 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> 

我有两种形式：

• form1 是主窗体
• form2 是隐藏的弹出模式

规则：

• 如果访问者在form1选择option1，继续提交表单 照常。在这里无事可做。
• 如果访问者在 form1 中选择 option2，则停止 form1 提交并显示 form2 模态，因为我们需要额外的字段。访客填写后 点击form2提交。我们将继续提交form1 包括form2中的additional_field作为附加参数 在表格 1 中。
• 如果访问者在 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();
 });

ALSO ：您可以将检索到的元素分配给一个变量，然后使用该变量，而不是一次又一次地使用$("#form1")。它提高了效率，是一种很好的做法。 :)