JQuery - submit a form via AJAX and put the results page in a div ...?

Question

I use the jQuery form ( http://jquery.malsup.com/form/ ) to get the submission data to the form - is there a way I can then, without updating, put the results page generated by the form in a div on the page?

Any advice appreciated!

Answer 1

I would advise against using this form plugin - it was created back in those days before there was an easy way to serialize form data using jQuery and no longer serves any real purpose. I would suggest something like this:

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

---

If you insist on using the jQuery Form plugin - which is NOT recommended - you can set target to select the element (s) that you would like to fill out:

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

See http://jquery.malsup.com/form/#options-object for more information.

To prevent the upgrade, just make sure the onsubmit form onsubmit returns false:

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