表单提交无视jQuery Dialog按钮，如何实现用户确认后再提交？

你的核心问题是表单提交流程和jQuery Dialog的异步交互冲突：表单提交不会等待用户操作Dialog就直接执行，而强行阻止提交后又没法在用户确认后继续提交。下面是修复后的代码和关键说明：

修改后的HTML代码 #

<form id="orderForm" action="/mywebsite/order.htm" method="POST">
  <input id="choiceBstatus" name="choiceBstatus" type="hidden" value="true">
  <div id="ownerDisplayFields" style="visibility: visible;">
    <table class="noPrint">
      <!-- 原有内容 -->
    </table>
  </div>
  <div id="pManualTitle" style="display: block">
    <table class="noPrint">
      <tbody>
      </tbody>
    </table>
  </div>
  <div id="checklist_dialog" title="New Title" style="display: none;">
    <p>Checklist 1 goes here</p>
    <p>Checklist 2 goes here </p>
  </div>
  <table class="noPrint">
    <tbody>
      <tr>
        <td align="center"><br>
          <input class="button" type="submit" name="save" value="Save"> - 
          <input class="button" type="submit" name="cancel" value="Cancel" onclick="bCancel = true;">
        </td>
      </tr>
    </tbody>
  </table>
</form>

修改后的JavaScript代码 #

$(document).ready(function() {
  $('#checklist_dialog').hide();

  // 绑定表单提交事件，替代原onsubmit属性
  $('#orderForm').on('submit', function(e) {
    // 先执行原有表单验证，不通过直接终止提交
    if (!validateOrderForm(this)) {
      e.preventDefault();
      return;
    }

    // 获取选中的单选框值
    var selectedVal = "";
    var selected = $("input[type='radio'][name='sampleChoice']:checked");
    if (selected.length > 0) {
      selectedVal = selected.val();
      console.log("Selected Option is " + selectedVal);
    }

    // 触发Dialog的条件：选中choiceB且状态为true
    if (selectedVal === "choiceB" && $("#choiceBstatus").val() === "true") {
      e.preventDefault(); // 阻止表单默认提交流程

      $('#checklist_dialog').dialog({
        modal: true,
        maxWidth: 600,
        maxHeight: 500,
        width: 600,
        height: 500,
        overlay: {
          opacity: 0.7,
          background: "black"
        },
        buttons: {
          "SAVE": function() {
            $(this).dialog('close');
            alert("Inside SAVE button which is clicked");
            $("#choiceBstatus").val("false");
            // 用户确认后手动触发表单提交
            $('#orderForm').submit();
          },
          "CANCEL": function() {
            $(this).dialog('close');
            alert("You must complete / save the checklist before saving your form!");
          }
        }
      });
    }
    // 其他情况（未选中choiceB或状态已为false），表单正常提交
  });
});

// 保留原有表单验证函数
function validateOrderForm(form) {
  // 此处替换为你的实际验证逻辑，返回true或false
  return true;
}

关键修改说明 #

1. 移除onsubmit属性：改用jQuery绑定表单提交事件，能更灵活地控制提交流程，避免同步函数无法等待Dialog交互的问题。
2. 阻止默认提交：当需要弹出Dialog时，调用e.preventDefault()暂停表单提交，等待用户操作。
3. 手动触发提交：用户点击Dialog的SAVE按钮后，修改状态值并调用$('#orderForm').submit()，此时因为状态已改为false，不会再次触发Dialog，表单直接正常提交。

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