jQuery - submit form via AJAX and put results page into a div...?

Question

Hello! I'm using jQuery Form (http://jquery.malsup.com/form/) to get send data to a form - is there a way I can then, without refresh, put the results page that's generated by the form into a div on the page?

Any advice appreciated!

Answer 1

I would suggest not using that form plugin - it was made back in the days before there was an easy way to serialize form data using jQuery, and serves no real purpose any more. I would suggest something like this:

$("form").submit(function() {
    $.post($(this).attr("action"), $(this).serialize(), function(html) {
        $("#someDiv").html(html);
    });
    return false; // prevent normal submit
});

If you insist on using it, you can set the target option to a selector of the element(s) you would like to fill up:

// prepare Options Object 
var options = { 
    target:     '#divToUpdate', 
    url:        'comment.php', 
    success:    function() { 
        alert('Thanks for your comment!'); 
    } 
}; 

Take a look at http://jquery.malsup.com/form/#options-object for more info.

To prevent refresh, just make sure the form's onsubmit event returns false:

<form method="post" onsubmit="return false">