Check out my latest project: Full Frontal JavaScript Conference
5 Mar

jQuery AJAX'ed forms

Inspired by Dustin Diaz’s AJAX screencast, I thought it was time I made a little more use of iShowU and show how easy, and quick it can be to pile on some AJAX calories to pretty much any form.

The screencast is sans-sound, really just to try to keep my out-going bandwidth down, but I’ve commented along the way so you can understand (…hopefully…) what I’m doing, and why I’m doing it.

Download the QuickTime screencast, 9MB, a little over 10 minutes

If you can’t view the screencast, try DivX Web Player for Windows or the Mac.

You can also have a look the code used in the screencast to have a play or to upgrade.

As always, let me know if you have any questions or suggestions.

Watch out for this gotcha that I just stumbled in to: if your form has an input element with the name 'action', the line url: this.action is going to grab that element, rather than the form's action. Instead, use this.getAttribute('action')

64 Responses to “jQuery AJAX'ed forms”

1 2 3 4
  1. vitto February 22nd, 2008 at 1:51 pm

    hi
    have you got an implementation of this form with a file type input? i'm using the ajaxUploadfile plugin but i can't make it work exactly like i need.

    Have you?
    Thanks vitto

  2. Greg Hartwig February 29th, 2008 at 3:49 pm

    I have a quick, improved portion of code that will extract the form data and handle radio buttons and checkboxes:

    
		// Collect form input fields
		var inputs = new Object;
		$(':input', this).each(function() {
			if (this.name != "") {  // Ignore inputs without a name
				if ((this.type == "radio" || this.type == "checkbox") && !this.checked) {
						// ignore this item
				} else {
					inputs[this.name] = this.value;
				}
			}
		});

		// Send the request
		jQuery.ajax({
			data: inputs,
			url:  this.getAttribute('action'),
			type: this.getAttribute('method'),
...

    Thanks for this tutorial or I'd never have figured out what was necessary!

  3. Jonas Flint April 21st, 2008 at 3:43 pm

    Having a small problem. I want the message sent message to be inlined in a div tag instead:

    Html:

    JS:

    success: function(r) {
    $('#message').attr('innerHTML','Message has been sent!' msg);
    }

    But the page ends up refreshing with the message....

    http://palmettopromises.com/preview/contactform.php

  4. djaka May 1st, 2008 at 1:40 am

    hai remy, i`m djaka, the example of 'ajax-form' is really great...i`m wondering if you could show me some example about uploading file using jquery and ajax... :D thanks

  5. Blog Author Remy Sharp May 1st, 2008 at 9:15 am

    @DJaka - check out my jQuery for Designers project. I post around every 2-4 weeks, but I've had a few requests for similar functionality, so it's on the list. Most of the posts include a screencast going through each tutorial in detail.

  6. Pete June 5th, 2008 at 1:47 pm

    Very useful tutorial. Got me up and running with jQuery.ajax in about 5 minutes more than the video took to play.
    Initially I was a little unsure about the lack of sound but I found the style of the tutorial, with the typed commentary, to be both useful and very friendly.

  7. Blog Author Remy Sharp June 5th, 2008 at 1:49 pm

    @Pete - if you're after a few more screencast tutorials (this time with sound!), check out my other blog jQuery for Designers

  8. Pete June 5th, 2008 at 2:51 pm

    @Remy - but do I want to shatter the illusion by hearing your voice? ;-)

    I've already del.ico.us'd jQuery for Designers

  9. Newcastle Student Accommodation July 14th, 2008 at 10:30 am

    I'm still having issues with AJAX, I still can't get by head around some aspects of it.
    I must admit though this whole web 2.0 era is pretty interesting.

  10. jQuery AJAX’ed forms « llbbl July 25th, 2008 at 7:31 pm

    [...] 25, 2008 jQuery AJAX’ed forms Posted in General [...]

  11. Mark August 11th, 2008 at 2:09 pm

    Really good tutorial. Could you tell me what HTML editor you are using?

  12. Blog Author Remy Sharp August 11th, 2008 at 2:54 pm

    @Mark - TextMate - possibly the best development tool I've had the pleasure to work with :-)

  13. Mark August 12th, 2008 at 7:06 pm

    @Remy - Thanks, i will check that out. I like the shortcuts and textcomplete that i seen in the screencast.

    Also, could you recommend any good forums for php devleopers. For chatting and jquery help.

    Edit - Arggh, its for mac, unfortunately i use windows.

    Edit - Found E-TextEditor for Windows that works with TextMate Bundles. Will give it a go now. I'm so sick of dreamweaver for text editing.

  14. Norik August 26th, 2008 at 11:50 am

    tnx 4 sharing this code

    I am using asp and I was able to integrate this code to Classic ASP and .Net in no time.

    keep more jQuery ajax stuff coming plz

    PS. your comment count down is COOL :)
    -Norik

  15. Nova’s Blog » Blog Archiv » JQuery Tutorials für Einsteiger August 30th, 2008 at 5:02 pm

    [...] http://24ways.org/2007/unobtrusively…ts-with-jquery http://remysharp.com/2007/03/05/jquery-ajaxed-forms/ http://remysharp.com/2007/01/25/jque…ext-box-hints/ [...]

  16. Sam September 1st, 2008 at 6:20 am

    Hi Remy,
    As a bloody beginner with Jquery I really appreciate your screencasts and writeups. I am familiar with prototype (somewhat), but this jquery breaks my neck. I am playing with your code from ajaxed forms and added the fix from Greg Hartwig for the check and select boxes...ALL worked nicely until I added a multi select box, and this box is only posted with 1 value. I tried .serialize which sends Everything, but also refreshes the page and does not really process it.
    So I am stumped, any help is greatly appreciated, thanks

  17. Aditya September 16th, 2008 at 2:21 pm

    Hi Remy,

    I trying to add a comment system in a knowledge base. Now typically, I can add a form at the end of an article which the user can fill and submit it. The data is sent to the db and the URL refreshes sending the user back to the add a comment page. The posted comment is now appearing above the add a comment box, like in a blogging system.

    Now I want to use ajax or any other option to accomplish the same without the URL refresh. An example could be this location:

    http://typo.i24.cc/logahead/?2006/09/26/your_comments

    The fields I am trying to capture is comment_id (int 10, primary key, auto increment), article_id (int 10, hidden field), comment_author (varchar, captured using a hidden field and username value), comment_description (text), comment_date(datetime).

  18. Will December 24th, 2008 at 8:07 pm

    Hey Remy, thanks for this work!

    What would you recommend if my form id was not static but dynamic? In my case the id is output by a php script and so it is impossible to "hard code" the javascript for each possible form id. How could I make this dynamic to handle different ids?

    Thanks

  19. Todd March 25th, 2009 at 4:49 pm

    Hi Remy,

    Your code continues to be a great help to me, but I've stumbled onto what I think is a small weakness. I notice that if people use the + symbol in their text, it gets removed. I think this might come from this line:

    $(':text', this).each(function() {
    myFieldsAry.push(this.name + '=' + escape(this.value));
    })

    Maybe there is something I can do to "this.value" prior to escaping it?

  20. Todd March 27th, 2009 at 11:21 am

    Remy,

    Looking back I see that the $(':text', this).each part is a modification that I made myself. Do you still have an example of the code in action somewhere on your site though? I'd like to see if the plus (+) signs get ripped out of your solution also. I can't figure out what to do.

1 2 3 4
Leave a Reply
Not required

CODE: Please escape code and wrap in <pre><code>, doing so will automatically syntax highlight