Butang dialog jQuery diabaikan, teruskan menghantar borang

Question

Saya mempunyai kod borang berikut dan kod javascript ditunjukkan di bawah. Masalahnya ialah apabila melaksanakan untuk validateDialogForm(), jika syarat tertentu dipenuhi, kotak dialog jquery akan dipaparkan. Saya sememangnya dapat melihat dialog muncul selama beberapa saat, tetapi ia tidak akan kekal di sana dan borang masih terus diserahkan. Saya mahu borang dijeda untuk tempoh masa dan hanya menyerahkan apabila pengguna mengklik butang Simpan Saya cuba menambah return false; sebelum tamat fungsi validateDialogForm() Penyerahan borang tidak akan diteruskan, tetapi akan kekal seperti sedia ada. Apa yang saya buat salah di sini? Keadaan semasa kod di bawah ialah borang akan terus diserahkan tanpa mengira dialog jquery.（为了清晰起见，删除了很多不相关的代码）

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

function validateDialogForm() {

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

  //LANGKAH:1 Semak jika pilihan B dipilih.
  var selectedVal = "";
  var dipilih = $("input[type='radio'][name='sampleChoice']:checked");

  if (selected.length > 0) {
    selectedVal = selected.val();
    console.log("Pilihan yang Dipilih ialah " + selectedVal);
  }

  if (selectedVal === "choiceB") {
    if ($("#choiceBstatus").val() === "true") {
      //tunjukkan kotak dialog
      $('#checklist_dialog').dialog({
        modal: benar,
        maxWidth: 600,
        maxKetinggian: 500,
        lebar: 600,
        ketinggian: 500,
        tindanan: {
          kelegapan: 0.7,
          latar belakang: "hitam"
        },
        butang: {
          "SIMPAN": function() {
            $(this).dialog('close');
            alert("Butang SAVE Di dalam yang diklik");
            $("#choiceBstatus").val("false");
            //disahkan = benar;

            kembali benar;
          },
          "BATAL": function() {
            $(this).dialog('close');
            alert("Anda mesti melengkapkan / menyimpan senarai semak sebelum menyimpan borang anda!");
            // return false;

          }
        }
      });
      /* e.preventDefault();
                            kembali palsu; */
    } //akhir if($("#choiceBstatus").val() == benar ){

    if ($("#choiceBstatus").val() === "false") {
      // kembalikan benar;
    }
  } //akhir if(selectedVal === "choiceB"){

  //kembali palsu;               

  /* if(isConfirmed){
    
    kembali benar;
  }         
  lain {
    kembali palsu;
  }
   */
}

<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">
      //beberapa div

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

    <p>Senarai Semak 1 pergi ke sini</p>
    <p>Senarai Semak 2 pergi ke sini </p>


  </div>

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

        <td align="center"><br>
          <input class="button" type="submit" name="save" value="Simpan"> - <input class="button" type="submit" name="cancel" value="Batal" onclick="bBatal = benar;">


        </td>
      </tr>
    </tbody>
  </table>

  <div></div>
</form>

Answer 1

Seperti yang dinyatakan dalam ulasan, anda perlu menghalang penyerahan borang apabila dialog ditunjukkan kerana dialog tidak menyekat UI. Ia akan terus diserahkan melainkan anda menghentikannya. Selepas anda menekan butang dalam kotak dialog, anda sebenarnya boleh menyerahkan borang tersebut.

Sekarang perkara yang rumit ialah apabila anda benar-benar menyerahkan borang, ini juga mencetuskan fungsi onsubmit semula! Cara yang baik ialah memasang bendera. Lihat pseudokod di bawah yang sepatutnya melakukan apa yang anda mahukan.

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