确认对话框不显示

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