jQuery表单提交并以模式确认 [英] jquery form submit with confirmation in a modal

问题描述

我使用了几年前另一个问题的一些代码 在表单提交中执行jQuery确认模式吗?

I've used some code from another question asked years ago Implement jQuery confirmation modal in a form submit?

但是这个问题还远远不足以显示在回答是"时如何提交表单，而我却无法使该表单生效.

but that question didn't go far enough to show how a form could be submitted when responding with Yes and I haven't been able to get this to work.

您将看到我尝试做的所有方式(它们已被注释掉). 有人知道我在做什么错吗?

You will see all the ways I've tried to make work (they are commented out). Does anybody know what I'm doing wrong here?

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

       });

推荐答案

在这里尝试这个.而不是放置一个提交按钮，而是将该按钮变成一个普通按钮并处理其单击事件.然后，如果用户单击是，则只需提交表单.您还会遇到一些语法错误，例如不需要的表单操作<form action""，完全删除该操作，然后以相同的表单发布.

Try this one here. Instead of putting a submit button, make the button a normal button and handle its click event. Then you just submit the form if the user clicks Yes. You also have some syntax errors like this unneeded form action <form action"", remove the action at all, you're posting at the same form.

您的代码稍有更改

<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 post变量传递给PHP.表单内的更改是:

I have updated my code to use a hidden field to pass the moveOn post variable to PHP. The changes inside the form are:

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

更新2

看来您还有另一个错误，阻止表单提交数据.这是type="post"形式，这当然是不正确的，并且需要使用method="post"来设置正确的表单方法:

It appears you have one more error that prevents the form from submitting the data. It's the form type="post" which of course is incorrect and to set the correct form method you need to use method="post":

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

您可以在此处尝试我的示例: http://zikro.gr/dbg/html/Submit-confirm/

You can try my example here: http://zikro.gr/dbg/html/submit-confirm/

以下是我的示例工作的屏幕截图:

Here is a screen capture with my example working:

更新3

我想您已经有一个PHP代码可以在脚本开始时处理POST数据，就像这里的这样:

I suppose you already have a PHP code that handles the POST data at the beggining of the script, like this one here:

<?php 

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

?>

这篇关于jQuery表单提交并以模式确认的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！