JQuery 表单插件 - 表单提交前的用户确认提示？答案

【问题标题】：JQuery form plugin - User confirmation prompt prior to form submit?JQuery 表单插件 - 表单提交前的用户确认提示？
【发布时间】：2010-12-03 15:01:01
【问题描述】：

我们使用 JQuery 表单 plugin 来总结我们的表单：

    var options = {
            dataType: 'json',
            beforeSubmit:  createposPreSubmit,
            success:       createposPostSubmit,
            error: function(xhr) { handleError(xhr, 'Error in Create Pos grid form submission'); }
    };

    $('#form-createpos').ajaxForm(options);

我们希望在提交表单之前使用 JQuery UI 的 dialog 方法显示继续/取消确认提示。

问题是dialog 是异步的，所以我们不能等待用户的响应。因此，我们从beforeSubmit 返回false。但是如果用户选择继续，我不知道如何触发表单提交：

这些是我们模式对话框中的按钮：

function createposPreSubmit(formData, jqForm, options) {

...

var buttons = {
    "Continue": function () {
        $(this).dialog("close");
        //HOW CAN WE SUBMIT FORM??  
        disableSubmit($("#submit-createpos"));
    },
    "Cancel": function() {
        $(this).dialog("close");
    }
};

//Show dialog

//Always return false
return false;
}

在“继续”按钮功能中，jqForm.submit 和 jqForm[0] 似乎无法正常工作。 jqForm[0] 似乎确实提交了表单，但浏览器以“奇怪”的方式行事。

【问题讨论】：

你用的是什么浏览器？如果是 IE，预计会有奇怪的动作 ;) 你是说 jQuery $('element').submit(); 函数不起作用吗？我得看看剩下的代码是什么（比如disableSubmit()函数）......

标签： jquery jquery-ui modal-dialog

【解决方案1】：

如果我理解正确，您希望“预先提交”您的表单，以便当他们接受时，希望不需要再做任何工作，或者最坏的情况是，他们只需要等到当前请求完成.

我建议您使用初始为 null 的全局变量，并在他们“提交”后将其标记为 true。当您收到来自“预提交”的回调时，请检查全局变量的状态。如果是真的，继续提交。如果是假的，什么也不做。如果它为空，则意味着回调在他们关闭对话框之前完成，这意味着您需要第二个全局变量最初为 null，在这种情况下您可以将其设置为 true，这样如果您在“继续”中发现它为 true ' 按钮操作，您会知道立即进行而不是等待。

我希望您的代码看起来像：

var ajaxPreSubmitOk = null;
var dialogSubmitOk = null;
var buttons = {
    "Continue": function () {
        $(this).dialog("close");
        dialogSubmitOk = true;
        if(ajaxPreSubmitOk !== null && ajaxPreSubmitOk) {
            // Presubmit returned and everything is ok.. proceed!
            callSubmit();
        } else if (ajaxPreSubmitOk === null) {
            // Gotta wait still
            disableSubmit($("#submit-createpos"));
        }
    },
    "Cancel": function() {
        // Regardless of presubmit outcome, do nothing
        dialogSubmitOk = false;
        $(this).dialog("close");
    }
};

function ajaxFormCallback() {
    // If callback success 
    if(true) {
        ajaxPreSubmitOk = true;
        if(dialogSubmitOk !== null && dialogSubmitOk) {
            // User already clicked continue.  We're good!
            callSubmit();
        }
    // else callback fail
    } else {
        // Regardless of outcome, do nothing
        ajaxPreSubmitOk = false;
    } 
}

function callSubmit() {
    enableSubmit($("#submit-createpos"));
    ajaxPreSubmitOk = null;
    dialogSubmitOk = null;

    // What do do when everything goes as planned
}

【讨论】：

【解决方案2】：

我最终使用了这种方法：

$('#form-createpos').submit(function() {
    var options = {
        success: myfunc //WE DON'T NEED A PRESUBMIT HANDLER
    };

    var buttons = {
        "Continue": function () {
            $(this).dialog("close");
            theForm.ajaxSubmit(options);  //MANUALLY SUBMIT FORM 
        },
        "Cancel": function() {
            $(this).dialog("close");
        }
    };

    //Show JQuery dialog
});

【讨论】：