将ajaxSubmit定位到弹出窗口

时间:2012-04-24 00:02:15

标签: jquery ajax forms popup

我有一个表单需要在提交前进行验证,POST到弹出窗口,然后需要重置表单。

我知道target="newWindowName"onsubmit="window.open('','newWindowName','')"表单属性有效,但这并不能让我在提交后做任何事情。

我知道我可以使用$('form').ajaxSubmit()来指定提交后的功能,但似乎没有让我打开一个新窗口。

我怎样才能一次完成所有这些事情?

这是我的表格:

<form id="myForm" target="newWindow" autocomplete="on" action="/myUrl" method="post">

这是我的javascript:

$('#myForm').submit(function(e) { 
    e.preventDefault();
    if ($('#myForm').valid()) {
        var options = {
            target: '',
            beforeSubmit: function () {
                this.target = "newWindow"; 
                window.open("", "newWindow", "width=500,height=450");
            },
            success: function () {
                hideForm();
                $('#myForm').resetForm();
            }
        };

        $(this).ajaxSubmit(options);
    }
    return false;
}

2 个答案:

答案 0 :(得分:2)

这是我最终选择的解决方案,这更加优雅。

<form id="myForm" target="newWindow" autocomplete="on" action="/myUrl" method="post">

然后是JS:

$('#myForm').submit(function(e) {
    if ($(this).valid()) {
        var f = this;
        window.open("",$(this).attr("target"),"width=500,height=500"); 
        setTimeout(function () {  // delay resetting the form until after submit
            hideForm();
            f.reset();
        }, 0);
        return true;
    }
    else {
        e.preventDefault();  // only prevent default if the form is not valid
    } 
    return false;
});

这样,新窗口只会在表单有效时显示。

答案 1 :(得分:1)

您在表单标记中使用target属性是正确的想法。这将自动将表单提交到名为“newWindow”的窗口。 (要始终提交到窗口,请使用target="_blank"。)

问题是你是阻止将表单提交到新窗口,然后使用JavaScript来执行ajax提交。如果您删除了额外的代码,您将得到您想要的:

$('#myForm').submit(function(e) {
    if ($(this).valid()) {
        var f = this;
        setTimeout(function () {  // delay resetting the form until after submit
            hideForm();
            f.reset();
        }, 0);
    }
    else {
        e.preventDefault();  // only prevent default if the form is not valid
    } 
});

工作演示: http://jsfiddle.net/2x6wL/