Bouton de dialogue jQuery ignoré, continuez à soumettre le formulaire

Question

J'ai le code de formulaire suivant et le code javascript est affiché ci-dessous. Le problème est que lors de l'exécution de validateDialogForm(), si certaines conditions sont remplies, une boîte de dialogue jquery s'affichera. Je peux effectivement voir la boîte de dialogue apparaître pendant quelques secondes, mais elle ne restera pas là et le formulaire continue d'être soumis. Je souhaite que le formulaire soit mis en pause pendant un moment et soumis uniquement lorsque l'utilisateur clique sur le bouton Enregistrer J'ai essayé d'ajouter return false; avant la fin de la fonction validateDialogForm() La soumission du formulaire ne se poursuivra pas, mais restera telle quelle. Qu'est-ce que je fais de mal ici ? L'état actuel du code ci-dessous est que le formulaire continuera à être soumis quelle que soit la boîte de dialogue jquery.（为了清晰起见，删除了很多不相关的代码）

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

fonction validateDialogForm() {

  $('#checklist_dialog').show();
  var estConfirmé = faux;

  //STEP:1 Vérifiez si l'option B est sélectionnée.
  var selectedVal = "";
  var sélectionné = $("input[type='radio'][name='sampleChoice']:checked");

  if (selected.length > 0) {
    selectedVal = sélectionné.val();
    console.log("L'option sélectionnée est " + selectedVal);
  }

  if (selectedVal === "choixB") {
    if ($("#choiceBstatus").val() === "true") {
      //afficher la boîte de dialogue
      $('#checklist_dialog').dialog({
        modal : vrai,
        largeur maximale : 600,
        hauteur maximale : 500,
        largeur : 600,
        hauteur : 500,
        superposition : {
          opacité : 0,7,
          fond : "noir"
        },
        boutons: {
          "ENREGISTRER": fonction() {
            $(this).dialog('close');
            alert("À l'intérieur du bouton SAVE sur lequel l'utilisateur clique");
            $("#choiceBstatus").val("false");
            //isConfirmé = vrai ;

            renvoie vrai ;
          },
          "ANNULER": fonction() {
            $(this).dialog('close');
            alert("Vous devez compléter/sauvegarder la checklist avant de sauvegarder votre formulaire !");
            // renvoie faux ;

          }
        }
      });
      /* e.preventDefault();
                            renvoie faux ; */
    } //fin de if($("#choiceBstatus").val() == true ){

    if ($("#choiceBstatus").val() === "false") {
      // renvoie vrai ;
    }
  } //fin de if(selectedVal === "choiceB"){

  //retourne faux ;               

  /* si(estConfirmé){
    
    renvoie vrai ;
  }         
  autre {
    renvoie faux ;
  }
   */
}</pré>
<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="visibilité : visible;">
    <table class="noPrint">
      //quelques divs

      </tcorps>
    </tableau>
  </div>
  <div id="pManualTitle" style="display: block">
    <table class="noPrint">
      <corps>
      </tcorps>
    </tableau>
  </div>
  <div id="checklist_dialog" title="Nouveau titre" style="display: none;">

    <p>La liste de contrôle 1 va ici</p>
    <p>La liste de contrôle 2 va ici </p>


  </div>

  <table class="noPrint">
    <corps>
      <tr>

        <td align="center"><br>
          <input class="bouton" type="soumettre" nom="enregistrer" valeur="Enregistrer"> - <input class="button" type="submit" name="cancel" value="Annuler" onclick="bCancel = true;">


        </td>
      ≪/tr>
    </tcorps>
  </tableau>

  <div></div>
</form>

Answer 1

Comme mentionné dans les commentaires, vous devez empêcher l'envoi du formulaire lorsque la boîte de dialogue est affichée, car la boîte de dialogue ne bloque pas l'interface utilisateur. Il continuera à se soumettre jusqu'à ce que vous l'arrêtiez. Après avoir appuyé sur le bouton dans la boîte de dialogue, vous pouvez réellement soumettre le formulaire.

Maintenant, le problème est que lorsque vous soumettez le formulaire, cela déclenche également à nouveau la fonction onsubmit ! Un bon moyen consiste à installer un drapeau. Voir le pseudocode ci-dessous qui devrait essentiellement faire ce que vous voulez.

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