JAVASCRIPT: Smart, unobtrusive AJAX form submission with jQuery


A former coworker was telling me recently about MooTools and how the AJAX functions are so easy to use.  He sent me the following example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function attachedToOnSubmitOfAForm(){
        sp = $("someForm");
        sp.addClass('loader');
 
        sp.send({
                onComplete: function(json) {
                        ....
                },
 
                onFailure:function(){
                        ....
                }
        });
}

Great concept, right? No need to tell it where to send the data or what fields to send, since the form already contains that info. It’s mostly unobtrusive, so any browser that doesn’t have JS enabled would still be able to submit.

So my immediate response was, “Very cool. I’m sure a jQuery plugin either exists or could be created pretty easily to handle that.”

I built the following plugin in maybe 30 minutes, and had it tested in another 15.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

(function(jQuery) {
	jQuery.fn.send = function(options) {
		return this.each(function(){
		    var form = jQuery(this);
			jQuery(this).bind('submit', function() {
				jQuery.ajax(jQuery.extend({
					type     : form.attr('method') || 'get',
					url      : form.attr('action') || window.location.href,
					data     : form.serialize()
				}, options));
				return false;
			});
		});
	};
})(jQuery);

There are some of you that are wondering, “Why is this necessary? I can write my own jQuery.ajax() code every time.” Yep, and that’s part the problem I’m trying to solve. The plugin is a shortcut for most of the jQuery.ajax() code you’d normally write and it makes unobtrusive form submission dead simple:

1
2
3
4
5

jQuery(function(){
	jQuery('form').send({
		complete : function(data) { alert(data.responseText); }
	});
});

The function takes one parameter, an object that extends the jQuery.ajax method.

Here’s a demo and the download.

2008-09-23: Updated window.location to window.location.href (Thanks Samori)

Information and Links

Join the community by commenting, tracking what others have to say, or linking to it from your blog.

Information
September 22nd, 2008
5 Responses
Feeds and Links
Comment Feed
From This Author
Del.icio.us
Digg
Technorati
Tags

, ,


Other Posts
JAVASCRIPT: Simple date conversion from SQL to readable
JAVASCRIPT: Iterating through objects, the easy way

Write a Comment

Take a moment to comment and tell us what you think. Some basic HTML is allowed for formatting.

Reader Comments

Comment Number:
1
Written by:
Samori Gorse
Posted on:
September 23, 2008 at 4:21 am

Please don’t use window.location when you meant window.location.href, this is not part of any standard and who knows, maybe tomorrow window.location.toString will return window.host…

I know that sounds stupid but it’s always good to avoid programming by accident.

The plugin is nicely written tough, really smart.

Comment Number:
2
Written by:
Dave
Posted on:
September 23, 2008 at 9:09 am

Don’t forget the form plugin!
http://malsup.com/jquery/form/

Your submit event handler can be shortened significantly by eliminating all the excess variables:

var $form = $(this);
$.ajax($.extend({
type : $form.attr(’method’) || ‘get’,
url : $form.attr(’action’) || window.location,
data : $form.serialize()
}, options));
return false;

Comment Number:
3
Written by:
Jared Mellentine
Posted on:
September 23, 2008 at 9:45 am

Good point, Samori. I replaced it above and in the download.

Comment Number:
4
Written by:
Jared Mellentine
Posted on:
September 23, 2008 at 9:54 am

Dave: I agree and have shortened it up a bit, although too much of that can decrease readability. FWIW, the jQuery Form plugin seems like overkill for what I wanted to do.

Comment Number:
5
Written by:
TheUiGuy
Posted on:
September 23, 2008 at 11:03 pm

Here is one of the great things that jQuery does that mooTools doesn’t do so well.

If you are getting back, say html as the result of an ajax call, what does it take to parse that html and do something with the results?

In jQuery, its about as easy as you showed. jQuery naturally lends itself to this kind of thought. Although mooTools I find to be a more highly structured and even easier to use in some respects, this one area is where jQuery shines. And if you have to ask I am totally 50/50 on which framework I like better. I use both.