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.


Rate It


Bookmark It

  • del.icio.us
  • Digg
  • Furl
  • Google
  • Technorati
  • Ma.gnolia
  • BlinkList
  • Blogmarks
  • Rojo
  • StumbleUpon

Comments

8 comments so far, why don't you post one too?

Burak Mehmet Gürbüz

Friday, April 04, 2008 | View all comments by Burak Mehmet Gürbüz

could you please give an example for this code :)

Andreas

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.

manu

Monday, April 07, 2008

very cool

CHis

Wednesday, November 12, 2008

Geat stuff

Al Newkirk

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.

Andreas

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.

Al Newkirk

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.

Andreas

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.


Comments closed

Comments are closed



Post It

From June 02 to April 23

  1. Mogrify is what you're looking for if you want to convert multiple images to multiple other images in ImageMagick
  2. Tommorrow, finally, the inFamous demo will be friggin availble on PSN!! Suweeeeeeeeet
  3. Fuck canvas is cool, I've started playing around with old 3D-shit again :)

October 2014

S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31


Recent Comments

  1. Vlad on A follow-up to "An alternative to div overlays":
    I'll try this.....
  2. Steve on jQuery Live Ajax Search Plug-in:
    This is a great script but I've got...
  3. Frank on jQuery Live Ajax Search Plug-in:
    Hey, sounds like a great plugin! I ...
  4. Andreas on jQuery Drag to Select Plug-in:
    @Paul - I didn't take into account ...

Style Switcher

The style switcher allows you to change the look and feel of exscale.se.
Only CSS and JavaScript are changed. The XHTML stays the same.

For more information about the styles, check the styles page.


Categories


Random Quote

Det gör inget att jag skrattar för det jag tänker på är så roligt - Ostens Linda


Random Images




Answer This!

Do you find the "scroll-pagination" annoying? (If you don't know what it is, scroll to the bottom of the first-page)


Blog Roll