html form submission via an ajax request? [duplicate]

Question

Possible Duplicate:
jQuery AJAX submit form

I have a form on a page A, and instead of me posting to a new page, is there a way that i can do onSubmit ajax request it instead? I want to make the page to be able to load in the result into a div.

I know how to write the script for the call sort of, but i wasn't sure if i had to hand write it or it if was possible to take all the form information and send it without having to code it all into the attributes. i was thinking I could just do some sort of thing like: onClick, post form but return results into a div.

Thoughts? Ideas?

Answer 1

Try using JQuery's serialize (API ref here)

EDIT: something like this:

 $("input.submit").click( function() {
    $.ajax( {
      type: "POST",
      url: $("form").attr( 'action' ),
      data: $("form").serialize(),
      success: function( response ) {
        //Code to process the response
      }
    });
    return false;
  } );

Answer 2

$.ajax({
 url: 'mypage.html',
 success: function(data){
    $('.result').html(data);
 },
 error: function(){
   alert('failure');
 }
});

Then you have a div:

<div class="result"> </div>

This will automatically populate with the result of your ajax post.

http://api.jquery.com/jQuery.post/

Also see TONS of related questions: Jquery checking success of ajax post