jQuery 模态对话框未提交我的表单 [英] jQuery modal dialog box isn't submitting my form

问题描述

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

I am using a jQuery Modal Dialog box to ask the user if they wish to submit the form or not.

但是在用户点击 Dialog 的 Submit 按钮后，表单并没有提交.

However after the user clicks Dialog's Submit button, the form is not submitting.

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

If I then click the forms submit button again, it submits.

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

I am guessing this is a scope issue, I have seen some other posts about it but as yet have spent many hours with no luck. Any ideas on how to solve this?

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>

推荐答案

解决方案很简单……你的按钮名称.你为什么问?我会告诉你的！

The solution is simply... your button name. Why you ask? I shall show you!

使用这个 jsfiddle 并注意我只做了一些更改.javascript没有改变，只是HTML

Take this jsfiddle and notice I only made a few changes. The javascript has not changed, just the 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 提交功能，每个人都很高兴.

I had to do #2 because calling $('#myform').submit was referencing the button, not the submit method, and jQuery got all kinds of confused. By renaming your button, the $('#myform').submit remains the expected jQuery submit function and everybody is happy.

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

I stumbled upon this through going through several iterations, which I've kept below for posterity.

祝你好运！

=======下面的原始帖子========

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

If all you want to do is "solve this", you can refactor as follows:

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

奇怪的是，以下方法也可以:

Oddly, the below works as well:

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 提交.

The only thing I changed here was removed the submit button and 100% submit via jQuery.

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