AJAX Form submit with jquery

How to submit a form using AJAX?

In this micro tut I will show you how to submit your HTML form using AJAX.

Why change a working formula?
Because it can work better and faster! (A good motto for web developers :) )
Most things we do on the web comes down to user experience. You want people browsing your site(s) to enjoy it so much that they want to stay longer, and come back again later.

Now when it comes to forms: Having a single form on a single page (like a contact form or comment box) submit with AJAX could be redundant, but when you have to fill in a series of forms on the other hand, the user will get irritated by waiting for all the page reloads. Here is where submitting a form with AJAX comes in, because you can reload only the part of your page that matters, making the process faster and cleaner.
Here are some examples of where an AJAX form submit will come in handy:

  • A survey or questionnaire with multiple answering pages
  • An online test with multiple question pages
  • A registration system, where information on pages depend on previously submitted pages
  • Any slow-loading site with heaps of external files included (for skipping all the HTTP request loading time)

Please teach me your skill master
Great, now that we realize we can do some of our websites way better, let’s get it done.
Say you have an HTML form that you wish to submit with AJAX:

<form id="myform" name="myform" method="post" action="http://mysite.com/ajax_page.php" >
........
<input type="submit" value="Submit"  id="form_submit" name="form_submit">
</form>

So we want the form to submit with AJAX when we click the submit button.
First get a handle on the elements we will need for the submit. Lets give them both a class so that we can reach them by their classname:

<form class="ajax_form" id="myform" name="myform" method="post" action="http://mysite.com/ajax_page.php" >
........
<input class="ajax_button" type="submit" value="Submit"  id="form_submit" name="form_submit">
</form>

The reason I use the class attribute and not id, is so that we can have a site–wide implementation for this, and not just on one form.
The best way to call your server–side file will probably be to set the action attribute of the form to where ever your file is, in this case it is: http://mysite.com/ajax_page.php .

Hint…
If you really want to be a ninja you can make the server–side file and the normal submit location the same file, and let the file provide different data depending on whether the call was per normal form submit or AJAX. If you do this you can cater for people browsing with javascript turned off, which is really a good way of coding, backwards compatible. This is unfortunately another discussion completely… so let’s get back to the problem at hand:

So now that we have our handles we can build the function. But how do we get all the values of all the inputs? It must be a tedious loop or manual capturing… not at all! Jquery was kind enough to bless us with a great function called serialize. This function can run on the form in question and give us all the key–value pairs of the form elements in a standard query string (the way we use to pass post or get variables).
So the basic algorithm for the job is:

  1. Ajax call triggers when the submit button is clicked
  2. Then get all the data on the form
  3. Send the data with a AJAX call to the serverside file
  4. The serverside file is located at the forms action attribute
  5. When the call completes, do your callback function (like building the new form or displaying a message)
  6. Return false so that the HTML form submit is overwritten with the javascript function

And here is the implementation in javascript (jquery) code:

	// Ajax form submit
	$('.ajax_button').click(function(){
		$.post($(".ajax_form").attr('action'), $(".ajax_form").serialize(), function(data) {
			ajax_complete(data,status)
		});
		return false;
	});

Our callback function in this case was ajax_complete(), in this function you can set the stage for your next AJAX form submit or handle any event to follow the call.

Now go out there and reve–lightning–fast the word of multiple form submissions!

3 Responses to “AJAX Form submit with jquery”

  1. Joaquin Miro says:

    I would can user this script in my web?

  2. Nico says:

    @Joaquin Feel free to use any scripts found on this site. Blogging is for helping the community

  3. Jeffrey Scott says:

    I love the article and greatly appreciate what you have done. I am trying to learn about using ajax to submit forms in order to post a form to two different locations. Would you be able to offer any guidance on how to do this?

Leave a Reply to Nico