jQuery .submit()在对话框确认后无法提交表单问题求助

核心问题点 #

• 表单选择器错误：调用submit()时未使用ID选择器前缀#，导致无法定位到表单元素
• 输入框ID不匹配：JS中操作的#boolConsent与表单实际的#boolConsentM不一致，无法正确修改同意状态值
• 可选：对话框关闭时移除元素会导致后续无法再次触发确认框（若需重复提交）

修正后的代码 #

表单代码（无需修改，仅确认ID对应）

<form action="reserve.php" method="post" id="YYKReservation" title="YYKReservation">
 ...
<input type="hidden" name="boolConsentM" id="boolConsentM" value="0">
<input name="YYKSubmitM" id="YYKSubmitM" type="submit" value="Submit">
</form>

<div id="Confirm" title="Pray">
    By clicking Accept, ...blah blah
</div>

JavaScript代码（修正关键错误）

$(document).ready(function(){
    $("#Confirm")
    .dialog({
      modal: true,
      title: 'Prayer Consent',
      zIndex: 10000,
      autoOpen: false,
      width: 'auto',
      resizable: false,
      buttons: {
        Accept: function() {
            $('#boolConsentM').val('1'); // 匹配表单中隐藏输入框的ID
            $(this).dialog("close");
            $('#YYKReservation')[0].submit(); // 修正表单选择器，用DOM原生方法直接提交（不触发submit事件监听器）
        },
        Decline: function() {
            $('#boolConsentM').val('0'); // 匹配表单中隐藏输入框的ID
            $(this).dialog("close");
            $('#YYKReservation')[0].submit(); // 修正表单选择器
        }
      },
      close: function() {
        // 移除$(this).remove()，避免后续无法打开确认框
        // $(this).remove();
      }
    });
    
    $('#YYKReservation').submit(function(e) {
        if ($('#boolConsentM').val() == 0) { // 匹配表单中隐藏输入框的ID
            e.preventDefault();
            $("#Confirm").dialog("open");
        }
    });
});

原理说明 #

1. 修正选择器：使用$('#YYKReservation')[0]正确定位表单，调用原生DOM的submit()方法时，不会触发jQuery绑定的submit事件监听器，避免再次进入确认框逻辑，直接提交表单。
2. 匹配ID：确保JS中操作的输入框ID与表单一致，保证同意状态值被正确修改，后续提交时能传递正确的参数。
3. 保留确认框元素：移除close事件中的remove()，确保用户多次提交表单时，确认框能正常弹出。

内容的提问来源于stack exchange，提问作者Beeker