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>

- dylan

---

有很多关于如何提交表单的例子：例如：https://dev59.com/umXWa4cB1Zd3GeqPJx0W - Jajo

Answer 1

解决方案很简单...是更改你的按钮名称。为什么呢？我会向你展示！请查看此 jsfiddle，注意我只做了少量更改，JavaScript 没有变化，只有 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. 我将动作更改为javascript调用以实现jsfiddle兼容性
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%的提交。

- Jaime Torres

Answer 2

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

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

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

- Leslie

Answer 3

您可以尝试在提交事件上使用不同类型的表单事件。

onsubmit="return confirm('Please confirm that you want to submit')"

看看这个编辑，现在你可以创建一个带有模态对话框的函数，返回true或false。

- Sender