jQuery 模式对话框未提交我的表单

Question

我正在使用 jQuery 模态对话框来询问用户是否希望提交表单。

但是，在用户单击对话框的“提交”按钮后，表单并未提交。

如果我再次单击表单提交按钮，它就会提交。

我猜这是一个范围问题，我看过其他一些关于它的帖子，但到目前为止已经花了很多小时但没有运气。关于如何解决这个问题有什么想法吗？

Javascript

$(document).ready(function(){
    var submitForm = $('#myform');
    submit = false;

    $("#confirm").dialog({
        resizable: false,
        height: 140,
        modal: true,
        autoOpen: false,
        buttons: {
            'Submit': function() {
                $(this).dialog('close');
                submit = true;
                submitForm.submit();
            },
            'Cancel': function() {
                $(this).dialog('close');
            }
        }
    });
    $("#confirm").parent().appendTo($("#myform")); 

    submitForm.submit(function() {
        if (submit) {
            return true;
        } else {
            $("#confirm").dialog('open');
            return false;
        }
    });
});

HTML

<form id="myform" action="#" method="post">
    <input type="text" name="check_me" />
    <input type="submit" name="submit" value="Go!" />
</form>
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>

Answer 1

解决方案很简单...您的按钮名称。你为什么问？我会告诉你!

拿这个jsfiddle请注意我只做了一些更改。 javascript 没有改变，只是 HTML

HTML

<form id="myform" action="javascript:alert('Success!')" method="post">
    <input type="text" name="check_me" />
    <input type="submit" name="btnSubmit" value="Go!" />
</form>
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>​

我做了两项更改:

1. 我将操作更改为 jsfiddle 兼容性的 javascript 调用
2. 我将您的按钮名称修改为“提交”以外的名称

我必须执行#2，因为调用 $('#myform').submit 引用的是按钮，而不是提交方法，并且 jQuery 遇到了各种困惑。通过重命名按钮，$('#myform').submit 仍然是预期的 jQuery 提交函数，每个人都很高兴。

我通过几次迭代偶然发现了这一点，我将其保留在下面以供后代使用。

祝你好运!

========原帖如下=======

如果你只想“解决这个问题”，你可以重构如下:

HTML

<form id="myform" action="#" method="post">
    <input type="text" name="check_me" />
    <input type="button" id="btnSubmit" value="Go!" />
</form>
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>​

JavaScript

$(document).ready(function(){
    var submitForm = $('#myform');
    submit = false;

    $("#confirm").dialog({
        resizable: false,
        height: 140,
        modal: true,
        autoOpen: false,
        buttons: {
            'Submit': function() {
                $(this).dialog('close');
                submit = true;
                submitForm.submit();
            },
            'Cancel': function() {
                $(this).dialog('close');
            }
        }
    });
    $("#confirm").parent().appendTo($("#myform")); 

    $("#btnSubmit").click(function() {
        $("#confirm").dialog('open');
    });

    submitForm.submit(function() {
        if (submit) {
            return true;
        }
    });
});​

奇怪的是，下面的代码也有效:

HTML

<form id="myform" action="javascript:alert('success!');" method="post">
    <input type="text" name="check_me" />
    <input type="button" id="btnSubmit" value="Go!" />
</form>
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>​

JavaScript

$(document).ready(function(){
    var submitForm = $('#myform');
    submit = false;

    $("#confirm").dialog({
        resizable: false,
        height: 140,
        modal: true,
        autoOpen: false,
        buttons: {
            'Submit': function() {
                $(this).dialog('close');
                submit = true;
                $('#myform').submit();
                //submitForm.submit();
            },
            'Cancel': function() {
                $(this).dialog('close');
            }
        }
    });
    $("#confirm").parent().appendTo($("#myform")); 
    $("#btnSubmit").click(function() { $('#myform').submit(); });

    submitForm.submit(function() {
        if (submit) {
            return true;
        } else {
            $("#confirm").dialog('open');
            return false;
        }
    });
});​

我在这里唯一改变的是删除了提交按钮和 100% 通过 jQuery 提交。