Question

I have a form that needs to be validated before submit, POST to a popup window, then the form needs to be reset afterwards.

I know the target="newWindowName" and onsubmit="window.open('','newWindowName','')" form attributes work, but this doesn’t let me do anything after submit.

I know I can use $('form').ajaxSubmit() to specify an after-submit function, but it doesn’t seem to let me open a new window.

How can I do all these things at once?

This is my form:

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

This is my 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;
}

Answer 1

Here is the solution I ended up going with that was much more elegant.

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

And then the 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;
});

This way, the new window will only show up if the form is valid.