jQuery-Dialogschaltfläche ignoriert, weiter mit dem Absenden des Formulars

Question

Ich habe den folgenden Formularcode und der Javascript-Code wird unten angezeigt. Das Problem besteht darin, dass bei der Ausführung von validateDialogForm() bestimmte Bedingungen erfüllt sind und ein JQuery-Dialogfeld angezeigt wird. Ich kann tatsächlich sehen, dass der Dialog einige Sekunden lang erscheint, aber er bleibt nicht dort und das Formular wird weiterhin gesendet. Ich möchte, dass das Formular für einen bestimmten Zeitraum pausiert und erst dann gesendet wird, wenn der Benutzer auf die Schaltfläche Speichern klickt. Ich habe versucht, return false; vor dem Ende der Funktion validateDialogForm() hinzuzufügen, um zu verhindern, dass das Formular gesendet wird Die Formularübermittlung wird nicht fortgesetzt, sondern bleibt unverändert. Was mache ich hier falsch? Der aktuelle Status des folgenden Codes ist, dass das Formular unabhängig vom JQuery-Dialog weiterhin gesendet wird.(为了清晰起见，删除了很多不相关的代码）

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

Funktion validierenDialogForm() {

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

  //SCHRITT:1 Prüfen Sie, ob Option B ausgewählt ist.
  var selectedVal = "";
  var selected = $("input[type='radio'][name='sampleChoice']:checked");

  if (selected.length > 0) {
    selectedVal = selected.val();
    console.log("Ausgewählte Option ist " + selectedVal);
  }

  if (selectedVal === "choiceB") {
    if ($("#choiceBstatus").val() === "true") {
      //Dialogfeld anzeigen
      $('#checklist_dialog').dialog({
        modal: wahr,
        maximale Breite: 600,
        maximale Höhe: 500,
        Breite: 600,
        Höhe: 500,
        Überlagerung: {
          Deckkraft: 0,7,
          Hintergrund: „schwarz“
        },
        Tasten: {
          „SPEICHERN“: function() {
            $(this).dialog('close');
            alarm("Innerhalb der Schaltfläche SPEICHERN, auf die geklickt wird");
            $("#choiceBstatus").val("false");
            //isConfirmed = true;

            return true;
          },
          „ABBRECHEN“: function() {
            $(this).dialog('close');
            Alert("Sie müssen die Checkliste ausfüllen/speichern, bevor Sie Ihr Formular speichern!");
            // falsch zurückgeben;

          }
        }
      });
      /* e.preventDefault();
                            falsch zurückgeben; */
    } //Ende von if($("#choiceBstatus").val() == true ){

    if ($("#choiceBstatus").val() === "false") {
      // true zurückgeben;
    }
  } //Ende von if(selectedVal === "choiceB"){

  //falsch zurückgeben;               

  /* if(isConfirmed){
    
    return true;
  }         
  anders {
    falsch zurückgeben;
  }
   */
}

<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: sichtbar;">
    <table class="noPrint">
      //einige Divs

      </tbody>
    </table>
  </div>
  <div id="pManualTitle" style="display: block">
    <table class="noPrint">
      <tbody>
      </tbody>
    </table>
  </div>
  <div id="checklist_dialog" title="Neuer Titel" style="display: none;">

    <p>Checkliste 1 finden Sie hier</p>
    <p>Checkliste 2 finden Sie hier </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

如评论中所提到的，当对话框显示时，您需要阻止表单提交，因为对话框不会阻塞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;
}