忽略了jQuery對話框按鈕，繼續提交表單

Question

<p>我有以下的表單程式碼和javascript程式碼如下所示。問題是當執行到<code>validateDialogForm()</code>時，如果滿足某些條件，會顯示一個jquery對話框。我確實能夠看到對話框出現了幾秒鐘，但它不會停留在那裡，表單仍然繼續提交。我希望表單在一段時間內暫停，只有當使用者點擊<code>儲存</code>按鈕時才提交。我嘗試在<code>validateDialogForm()</code>函數結束前加上<code>return false;</code>，以阻止表單提交，但當我點擊對話框的儲存按鈕時，它不會繼續提交表單，而是保持原樣。我在這裡做錯了什麼？以下程式碼的目前狀態是，無論jquery對話框如何，表單都將繼續提交。（為了聲音起見，刪除了許多不相關的程式碼）</p> <p><br />></p>

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

函數 validateDialogForm() {

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

  //步驟:1 檢查是否選擇了選項 B。
  var 選定的值 = "";
  var selected = $("input[type='radio'][name='sampleChoice']:checked");

  if (selected.length > 0) {
    selectedVal = selected.val();
    console.log("所選選項是" selectedVal);
  }

  if (selectedVal === "choiceB") {
    if ($("#choiceBstatus").val() === "true") {
      //顯示對話框
      $('#checklist_dialog').dialog({
        模態：真實，
        最大寬度：600，
        最大高度：500，
        寬度：600，
        高度：500，
        覆蓋：{
          不透明度：0.7，
          背景：“黑色”
        },
        紐扣： {
          「儲存」：函數（）{
            $(this).dialog('關閉');
            alert("在被點擊的儲存按鈕內");
            $("#choiceBstatus").val("假");
            //已確認= true;

            返回真；
          },
          「取消」：函數（）{
            $(this).dialog('關閉');
            Alert("在儲存表單之前，您必須完成/儲存清單！");
            // 返回假；

          }
        }
      });
      /* e.preventDefault();
                            返回假； */
    } //if($("#choiceBstatus").val() == true ){ 結束

    if ($("#choiceBstatus").val() === "false") {
      // 返回真；
    }
  } // if(selectedVal === "choiceB"){ 結束

  //返回假；

  /* if(已確認){
    
    返回真；
  }
  別的 {
    返回假；
  }
   */
}</pre>

  

    <表格類別=“noPrint”>
      //一些div

      </tbody>
    </表>
  
  

    <表格類別=“noPrint”>
      <正文>
      </tbody>
    </表>
  
;
  


    <p>此處為清單 1

  <表格類別=“noPrint”>
    <正文>
      <tr>

        

           - 


        </td>
      
    </tbody>
  </表>

  

</form></pre>
<p><br />></p>
P粉832212776520 天前546 

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