確認對話框不顯示

Question

我從來沒有在jQuery的工作過。這是我第一次。我需要一些確認對話框。我已經寫這個在我的項目中應用之前先測試它。我寫了這段代碼。只有在指定的單選按鈕被選中時，我才需要對話框。

主要問題：顯示確認對話框如果在單選按鈕指定的選項被選擇。

Jquery的代碼：

(function($){ 
    $.fn.checkLeave = function() { 
     return this.each(function(){ 

      if($("input[name='second']").is(':checked')) { 
       alert("Second Radio Button is CLicked"); 
       $.confirm({ 
        text: "Are you sure to submit the form", 
         title: "Confirmation required", 
         confirm: function(button) { 
          $("form").submit(); 
         }, 
         cancel: function(button) { 
         // nothing to do 
         }, 
         confirmButton: "Yes", 
         cancelButton: "No", 
         post: true, 
         confirmButtonClass: "btn-default", 
         cancelButtonClass: "btn-danger", 
         dialogClass: "modal-dialog modal-lg" 
       });  
      } 
      }); 
    }; 

})(jQuery); 

和HTML是：

<form action="dialogJquery.html" method="post"> 
    <input type="text" name="username" placeholder="Username"> 
    <input type="radio" id="first"> 
    <input type="radio" name="second" checked=""> 
    <input type="submit" value="Submit" id="submit" name="confirm" 
     onclick="$(this).checkLeave();"></button> 
</form> 

上面的代碼顯示對話框之前定義的警報。但是之後沒有顯示對話框。這是我從哪裏使用Jquery Dialog Plugin。但通過調試時，調試器達到$ .confirm，我點擊步驟，然後對話框顯示，但是當我恢復腳本它再次消除。

Answer 1

的基本問題是，表單提交，因爲你的代碼是什麼都不做，從提交停止它。因此，該對話框僅在瀏覽器提交表單並轉到指定頁面（dialogJquery.html）所需的時間內顯示。

一旦有人誰是更好的程序員着眼於這一點，他們可能可以想出一個更好的解決方案，但以下是我想出了，似乎工作。我已經爲元素等添加了一些ID - 您應該可以在沒有進一步解釋的情況下進行操作。我發現的一件事是，如果任何元素具有「提交」的名稱或ID，那麼.submit（）函數在表單上不起作用。

一般情況下，我處理的形式和提交的preventDefault事件，以便它不提交。確認按鈕將submitConfirm設置爲true並提交表單。

HTML

<form id="myForm" action="dialogJquery.html" method="post"> 
    <input type="text" name="username" placeholder="Username"> 
    <input type="radio" id="first"> 
    <input type="radio" name="second" checked> 
    <input type="submit" value="Submit" id="btnSubmit" name="confirm"> 
    </form> 

的Javascript

(function($) { 
    var submitConfirm = false; 

    $("#myForm").submit(function(event) { 
    if (!submitConfirm) { 
     event.preventDefault(); 
     if ($("input[name='second']").is(':checked')) { 
     $.confirm({ 
      text: "Are you sure to submit the form", 
      title: "Confirmation required", 
      confirm: function(button) { 
      submitConfirm = true; 
      $("#myForm").submit(); 
      }, 
      cancel: function(button) { 
      // nothing to do 
      }, 
      confirmButton: "Yes", 
      cancelButton: "No", 
      post: true, 
      confirmButtonClass: "btn-default", 
      cancelButtonClass: "btn-danger", 
      dialogClass: "modal-dialog modal-lg" 
     }); 
     } 
    } 
    }); 
})(jQuery);