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

我在这里更改的唯一内容是删除了提交按钮,并通过jQuery提交100%.

Answer 2

将提交按钮的名称属性从“submit”更改为“btnSubmit”

<input type="submit" name="btnSubmit" value="Go!" />

将表单操作属性中的“#”替换为空白或任何其他有效的 URL。