jQuery dialog button ignored, continue submitting form

Question

I have the following form code and the javascript code is shown below. The problem is that when executing to validateDialogForm(), 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 Save button. I tried adding return false; before the end of the validateDialogForm() 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.（为了清晰起见，删除了很多不相关的代码）

$('#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;
  }
   */
}

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

Answer 1

As mentioned in the comments, you need to prevent form submission when the dialog box is shown because the dialog box does not block the UI. It will continue to submit unless you stop it. After you press the button in the dialog box, you can actually submit the form.

Now the tricky part is that when you actually submit the form, this also triggers the onsubmit function again! A good way is to set a flag. See the pseudocode below which should basically do what you want.

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