jquery表单以模态形式提交并确认

Question

我使用了几年前另一个问题中的一些代码 Implement jQuery confirmation modal in a form submit?

但这个问题还不足以说明在回答“是”时如何提交表单，而且我无法让它发挥作用。

您将看到我尝试过的所有工作方式（它们已被注释掉）。 有人知道我在这里做错了什么吗？

     <div id="dialog-confirm" title="Ready?">
         <p>Are you sure?</p>
     </div>

    <form action"" id="myform" name="myform2" type="post">
        <input type="submit" value="Yes" name="moveOn" />
    </form>

     <script>
      $(function() {
        $("#dialog-confirm").dialog({
         resizable: false,
         height:190,
         autoOpen: false,
         width: 330,
         modal: true,
         buttons: {
           "Yes": function() {
             //$('#myform')[0].submit();
             //document.myform2.submit();
             //document.getElementById("#myform").submit();

              },
        No: function() {
           $(this).dialog("close");
         }
     }

   });

    $('#myform').submit(function() {
       $("#dialog-confirm").dialog('open');
       return false;
       });

       });

Answer 1

在这里试试这个。不要放置提交按钮，而是将按钮设置为普通按钮并处理其单击事件。然后，如果用户单击Yes，您只需提交表单。你也有一些语法错误，比如这个不需要的表单操作<form action""，完全删除操作，你在同一个表单上发布。

您的代码略有改动

<div id="dialog-confirm" title="Ready?">
    <p>Are you sure?</p>
</div>

<form id="myform" name="myform" method="post">
    <input type="hidden" name="moveOn" value="Yes" />
    <input type="button" id="moveOn" value="Yes" />
</form>

<script>
    $(function() {
        $("#dialog-confirm").dialog({
            resizable: false,
            height: 190,
            autoOpen: false,
            width: 330,
            modal: true,
            buttons: {
                "Yes": function() {
                    $('#myform').submit();
                },
                No: function() {
                    $(this).dialog("close");
                }
            }
        });

        $('#moveOn').on('click', function(e) {
            $("#dialog-confirm").dialog('open');
        });
    });
</script>

更新

我已更新我的代码以使用隐藏字段将 moveOn 后变量传递给 PHP。表单内部的变化是：

<input type="hidden" name="moveOn" value="Yes" />
<input type="button" id="moveOn" value="Yes" />

更新 2

您似乎还有一个错误导致表单无法提交数据。这是type="post" 的表单，当然是不正确的，要设置正确的表单方法，您需要使用method="post"：

<form id="myform" name="myform" method="post">
...
</form>

你可以在这里试试我的例子：http://zikro.gr/dbg/html/submit-confirm/

这是我的示例工作的屏幕截图：

更新 3

我想你已经有一个 PHP 代码在脚本开始时处理 POST 数据，就像这里的这个：

<?php 

if(isset($_POST['moveOn']) && $_POST['moveOn'] == 'Yes') {
    echo '<h3>The form was posted!</h3>';
}

?>

Answer 2

您遇到的问题是：当您单击“是”时，再次调用提交处理程序。

要解决这个问题，您可以使用trigger event with extraParameters 来区分提交是否是从对话框中触发的。

由于对话框是异步的，您可以使用延迟方法，这是我给 here 的一个旧答案。

代码和jsfiddle:

$(function () {
  $("#dialog-confirm").dialog({
    resizable: false,
    height:190,
    autoOpen: false,
    width: 330,
    modal: true,
    buttons: {
      "Yes": function() {
        //
        // Instead to submit the form trigger the
        // submit event with a parameter.....
        //
        $('#myform').trigger('submit', true);
      },
      No: function() {
        $(this).dialog("close");
      }
    }
  });

  $('#myform').submit(function(e) {
    //
    // Test if the submit event has been triggered from within the dialog
    //
    alert(arguments.length);
    if (!(arguments.length == 2 && arguments[1] === true)) {
      $("#dialog-confirm").dialog('open');
      return false;
    } else {
       // submitted
    }
  });


});

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<div id="dialog-confirm" title="Ready?">
    <p>Are you sure?</p>
</div>

<form action="" id="myform" name="myform2" type="post">
<input type="submit" value="Yes" name="moveOn" />
</form>

Answer 3

一个简单的解决方案是设置一个标志来检查您是否已经点击了“是”：

$(function() {
  var postForm = false;
  $("#dialog-confirm").dialog({
    resizable: false,
    height:190,
    autoOpen: false,
    width: 330,
    modal: true,
    buttons: {
      "Yes": function() {
        postForm = true;
        $('#myform').submit();
      },
      "No": function() {
        $("#dialog-confirm").dialog("close");
      }
    }
  });

  $('#myform').on('submit', function(e) {
    if(!postForm) {
      e.preventDefault();
      $("#dialog-confirm").dialog('open');
    } else {
      console.log('form submitting...')
    }
  });
});

查看这里以获取有效的JSFiddle

另一种解决方案是禁用提交表单（使用 e.preventDefault()）并在使用 AJAX 单击“是”后手动发布表单数据：

$(function() {
  $("#dialog-confirm").dialog({
    resizable: false,
    height:190,
    autoOpen: false,
    width: 330,
    modal: true,
    buttons: {
      "Yes": function() {
        $.ajax({
          type: "POST",
          url: $('#myform').attr('action'),
          data: $('#myform').serialize(),
          success: function(response) {
            console.log('form submitted');
          }
        });
      },
      "No": function() {
        $("#dialog-confirm").dialog("close");
      }
    }
  });

  $('#myform').on('submit', function(e) {
    e.preventDefault();
    $("#dialog-confirm").dialog('open');
  });
});

Answer 4

$("#dialog-confirm").dialog({
  resizable: false,
  height: 190,
  autoOpen: false,
  width: 330,
  modal: true,
  buttons: [{
    text: "Yes",
    click: function() {
      console.log("ASD");
      $(this).dialog("close");

      $('#myform').attr("data-submit", "true").submit();
    }
  }, {
    text: "No",
    click: function() {
      $(this).dialog("close");
    }
  }]
});

$('#myform').on("submit", function() {
  var attr = jQuery(this).attr("data-submit");
  if (attr == "false") {
    $("#dialog-confirm").dialog('open');
    return false;
  }
});

<div id="dialog-confirm" title="Ready?">
  <p>Are you sure?</p>
</div>

<form action='www.google.com' id="myform" name="myform2" type="post" data-submit="false">
  <input type="submit" value="Yes" name="moveOn" />
</form>

这应该可以工作。

HTML：

<div id="dialog-confirm" title="Ready?">
<p>Are you sure?</p>
</div>

<form action='www.google.com' id="myform" name="myform2" type="post" data-submit="false">
<input type="submit" value="Yes" name="moveOn" />

JS：

$("#dialog-confirm").dialog({
  resizable: false,
  height: 190,
  autoOpen: false,
  width: 330,
  modal: true,
  buttons: [{
    text: "Yes",
    click: function() {
      console.log("ASD");
      $(this).dialog("close");

      $('#myform').attr("data-submit", "true").submit();
    }
  }, {
    text: "No",
    click: function() {
      $(this).dialog("close");
    }
  }]
});

$('#myform').on("submit", function() {
  var attr = jQuery(this).attr("data-submit");
  if (attr == "false") {
    $("#dialog-confirm").dialog('open');
    return false;
  }
});

还有一个工作的jsfiddl。