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为＆＃34;提交＆＃34;那么.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);

确认对话框未显示

1 个答案: