Submit form using ajax jQuery plug-in
Published Sunday, January 20, 2008 in Ajax, jQuery, Progressive Enhancement
This plug-in will prevent your form's default action on submission and instead submit all data using XHR. Use it like this:
// submit the '#contact form'-form using XHR, then update the #contact-element with the response
$('#contact form').ajaxSubmit('#contact');
It will submit to the form's action using the form's method unless specified differently when calling the plug-in.
The plug-in will submit any element in the form that has a name-attribute to the URL specified in action.
The ajaxSubmit plug-in takes two arguments, the first is either a string containing a CSS-selector pointing to the element that should be updated with the response, or a custom callback-function that will run after ajax-response is ready. The response will be passed to the callback function.
The second argument is a config-object where you can set action, method and loading. They default to form's action, form's method and 'Loading...'. The loading-var is used to replace the text in the submit-button. You may wanna change to 'Sending...' or something similar if that is more appropriate.
You can get the latest version of the jQuery ajaxSubmit plug-in here.
Ok, enjoy.
Comments
8 comments so far, why don't you post one too?
Friday, April 04, 2008 | View all comments by Burak Mehmet Gürbüz
could you please give an example for this code :)
Friday, April 04, 2008 | View all comments by Andreas
The code-block above contains an example of how to submit the form in the #contact-element (div presumably) and update the same div with whatever the response is.
Whatever the URL the form is pointing to returns (action="send_email.php" for example) will be put into the #contact-element.
So it really helps to have some sort of modular design on your website.
Each module on my site can be individually accessed through /ajax/ModuleName/ so I'd submit the ajax-call to /ajax/Contact/ and that would only return the contact-module (not the entire contact-page).
It may be hard to get your head around at first but perhaps you should read a little more about Ajax and modularity?
Edit: Here's an example where I use it together with my live validation plug-in. The only thing returned from the contact form-submission is the contents of either Contact.tpl.php or MsgSent.tpl.php in the same directory.
Hope that makes sense.
Monday, April 07, 2008
very cool
Wednesday, November 12, 2008
Geat stuff
Tuesday, January 13, 2009 | View all comments by Al Newkirk
This is great, I was looking for this all night, everytime i think jquery can't get any better, people like you come along and strengthen my faith.
Tuesday, January 13, 2009 | View all comments by Andreas
@Al - thanks :) To be honest though I would recommend you try the official jQuery form plug-in. It's much more robust and complete than mine.
Tuesday, January 13, 2009 | View all comments by Al Newkirk
Ok thanks Andreas, what if i want to update an element with only a portion of the returned html.
Wednesday, January 14, 2009 | View all comments by Andreas
@Al - If the returned HTML is all contained within one element (like <div id="content">...loads of html...</div>) you can pass the returned code to jQuery and then you can use any jQuery methods you want on it:
var returned = $(data);
$('#some-element').html(returned.find('#some-element-in-the-returned-code'));
If your returned code contains more than one root element it won't work though.