如何防止e.c 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作为附加参数在form1。
• 如果访问者在form1上选择了option2，那么提交form1的唯一方法是当访问者点击表单2上的提交按钮时。

jquery逻辑实现这一点的最佳方式是什么?如何确保e.p preventdefault从form2提交时不调用两次?

我已经试过了，但是失败了:

$("#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. 当填写表格2时，form2Filled变成true，提交表格1，如果条件产生false，提交表格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")，您可以将检索到的元素分配给一个变量，并使用该变量。它提高了效率，是一个很好的实践。:)