<p>I have the following form code and the javascript code is shown below. The problem is that when executing to <code>validateDialogForm()</code>, if certain conditions are met, a jquery dialog box will be displayed. I can indeed see the dialog appear for a few seconds, but it won't stay there and the form still continues to submit. I want the form to pause for a period of time and only submit when the user clicks the <code>Save</code> button. I tried adding <code>return false;</code> before the end of the <code>validateDialogForm()</code> function to prevent the form from submitting, but when I click the dialog's save button, it The form submission will not continue, but will remain as is. What am I doing wrong here? The current state of the code below is that the form will continue to submit regardless of the jquery dialog.（为了清晰起见，删除了很多不相关的代码）</p> <p><br /></p> <pre class="brush:js;toolbar:false;">$('#checklist_dialog').hide(); function validateDialogForm() { $('#checklist_dialog').show(); var isConfirmed = false; //STEP:1 Check if option B is selected. var selectedVal = ""; var selected = $("input[type='radio'][name='sampleChoice']:checked"); if (selected.length > 0) { selectedVal = selected.val(); console.log("Selected Option is " selectedVal); } if (selectedVal === "choiceB") { if ($("#choiceBstatus").val() === "true") { //show the dialog box $('#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"); //isConfirmed = true; return true; }, "CANCEL": function() { $(this).dialog('close'); alert("You must complete / save the checklist before saving your form!"); // return false; } } }); /* e.preventDefault(); return false; */ } //end of if($("#choiceBstatus").val() == true ){ if ($("#choiceBstatus").val() === "false") { // return true; } } //end of if(selectedVal === "choiceB"){ //return false; /* if(isConfirmed){ return true; } else { return false; } */ }</pre> <pre class="brush:html;toolbar:false;"><form id="orderForm" action="/mywebsite/order.htm" method="POST" onsubmit="return (validateOrderForm(this) && validateDialogForm())"> <input id="choiceBstatus" name="choiceBstatus" type="hidden" value="true"> <div id="ownerDisplayFields" style="visibility: visible;"> <table class="noPrint"> //some divs </tbody> </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> <div></div> </form></pre> <p><br /></p>

<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;
}