忽略了jQuery对话框按钮，继续提交表单

Question

<p>我有以下的表单代码和javascript代码如下所示。问题是当执行到<code>validateDialogForm()</code>时，如果满足某些条件，会显示一个jquery对话框。我确实能够看到对话框出现了几秒钟，但它不会停留在那里，表单仍然继续提交。我希望表单在一段时间内暂停，只有当用户点击<code>保存</code>按钮时才提交。我尝试在<code>validateDialogForm()</code>函数结束前加上<code>return false;</code>，以阻止表单提交，但当我点击对话框的保存按钮时，它不会继续提交表单，而是保持原样。我在这里做错了什么？以下代码的当前状态是，无论jquery对话框如何，表单都将继续提交。（为了声音起见，删除了很多不相关的代码）</p> <p><br />></p>

$('#checklist_dialog').hide();

函数 validateDialogForm() {

  $('#checklist_dialog').show();
  var isConfirmed = false;

  //步骤:1 检查是否选择了选项 B。
  var 选定的值 = "";
  var selected = $("input[type='radio'][name='sampleChoice']:checked");

  if (selected.length > 0) {
    selectedVal = selected.val();
    console.log("所选选项为 " + selectedVal);
  }

  if (selectedVal === "choiceB") {
    if ($("#choiceBstatus").val() === "true") {
      //显示对话框
      $('#checklist_dialog').dialog({
        模态：真实，
        最大宽度：600，
        最大高度：500，
        宽度：600，
        高度：500，
        覆盖：{
          不透明度：0.7，
          背景：“黑色”
        },
        纽扣： {
          “保存”：函数（）{
            $(this).dialog('关闭');
            alert("在被点击的保存按钮内");
            $("#choiceBstatus").val("假");
            //已确认= true;

            返回真；
          },
          “取消”：函数（）{
            $(this).dialog('关闭');
            Alert("在保存表单之前，您必须完成/保存清单！");
            // 返回假；

          }
        }
      });
      /* e.preventDefault();
                            返回假； */
    } // if($("#choiceBstatus").val() == true ){ 结束

    if ($("#choiceBstatus").val() === "false") {
      // 返回真；
    }
  } //if(selectedVal === "choiceB"){ 结束

  //返回假；               

  /* if(已确认){
    
    返回真；
  }         
  别的 {
    返回假；
  }
   */
}</pre>

  
  

    <表类=“noPrint”>
      //一些div

      </tbody>
    </表>
  
  

    <表类=“noPrint”>
      <正文>
      </tbody>
    </表>
  
;
  


    <p>此处为清单 1</p>
    <p>清单 2 位于此处 </p>


  

  <表类=“noPrint”>
    <正文>
      

        

           - 


        </td>
      
    </tbody>
  </表>

  

</form></pre>
<p><br />></p>

Answer 1

如评论中所提到的，当对话框显示时，您需要阻止表单提交，因为对话框不会阻塞UI。除非您停止它，否则它将继续提交。在您按下对话框中的按钮后，您可以真正提交表单。

现在的棘手之处在于，当您真正提交表单时，这也会再次触发onsubmit函数！一个好的方法是设置一个标志。请参见下面的伪代码，它应该基本上做到了您想要的。

<form id="orderForm"
      action="/mywebsite/order.htm"
      method="POST"
      onsubmit="return (validateOrderForm(this) && validateDialogForm(this))">
...

let real_form_submit = false;

function validateDialogForm(theForm){
  if(!real_form_submit) {
    $('#checklist_dialog').dialog({
      ...
      buttons: {
        "SAVE": function() {
          $(this).dialog('close');
          real_form_submit = true;
          theForm.submit()
        },
        "CANCEL": function() {
          $(this).dialog('close');
        }
      }
    });
  }

  return real_form_submit;
}