How to submit form and update colorbox without reloading page

this is a follow up to: jQuery c开发者_如何学Gohange content of colorbox

Now the content of the initial colorbox (test_2.html) is a simple form: For e.g.

<form id="foo" action="test_3.html">
    <imput type="submit" id="formInput" value="send form">
</form>

The form should be sent, and the content of test_3.html should be loaded into the same colorbox.

If you add this to the docReady of your main page, it should take care of everything:

$('form').live('submit', function(e){
    var successHref = this.action,
        errorHref = "formError.php";

    e.preventDefault();
    $('#cboxLoadingGraphic').fadeIn();
    $.ajax({
        type: "POST",
        url: "processForm.php",
        data: {someData: $("#someData").val()},
        success: function(response) {
            if(response=="ok") {
                console.log("response: "+response);
                $.colorbox({
                    open:true,
                    href: successHref   
                });
            } else {
                $.colorbox({
                    open:true,
                    href: errorHref
                });
            }
        },
        dataType: "html"
    });

    return false;
});

This code makes a few assumptions, though. One of which is that this sends the data to "processForm.php" (as you can see), and expects the answer "ok" (in plain text, no json) when everything works out. If you don't care about the response, or about dealing with errors, then you could just remove the if-else block and open colorbox with the page you set in action. Anway, you'll probably want to tweak this, but it gives you an idea of how it can be done.