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

问题描述

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

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

但是，在用户单击对话框"的提交"按钮之后，该表单未提交.

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

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是引用按钮，而不是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

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

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

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

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