jquery表单以模态提交确认

Question

我使用了几年前提出的另一个问题的一些代码在表单提交中实现jQuery确认模式？

但是这个问题还远远不足以说明在回答“是”时如何提交表单而我无法使其工作。

你会看到我尝试过的所有方法（它们被注释掉了）。 有谁知道我在这里做错了什么？

     <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

在这里尝试这个。 不要使用提交按钮，而是将按钮设置为普通按钮并处理其单击事件。 然后，如果用户单击“ 是”，则只需提交表单。 您还有一些语法错误，例如不需要的表格操作<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>

UPDATE

我已经更新了我的代码，使用隐藏字段将moveOn post变量传递给PHP。 表格内的变化是：

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

更新2

您似乎还有一个错误阻止表单提交数据。 这是form 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

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

要解决此问题，您可以将trigger事件与extraParameters一起使用 ，以区分是否从对话框中触发提交。

因为对话框是异步的，所以你可以使用延迟方法，这是我在这里给出的旧答案。

代码和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 。