忽略了jQuery對話框按鈕,繼續提交表單
P粉832212776
P粉832212776 2023-08-15 12:55:00
0
1
475
<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粉832212776
P粉832212776

全部回覆(1)
P粉764836448

如評論中所提到的,當對話方塊顯示時,您需要阻止表單提交,因為對話方塊不會阻塞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;
}
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!