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')

66 Responses to “jQuery AJAX’ed forms”

  1. Wonderful. Many thankyou’s for making this. This will be an invaluable demonstration of how to make an ajax form with jQuery. You’ll find that these demo’s are perhaps one of the best resources for people to learn from.

    One recommendation I’d have about your use of Firebug is to take advantage of the larger command line :). Although you may have just turned it off for the demo.

    Other than that, it’s great to see another textmate user. Great screencast. Cheers.

  2. sorry lorry, works…
    but i had to remove the value: contact from the action

  3. Wicked awesome contact form. I am trying to modify it slightly for a project I am working on and don’t need the message text input area. When I wipe it out and submit the form, the submission alert returns the source of the page. I thought that if the process failed I would get one of the error messages.

    I’ve got a sample of the form on my site at http://www.speakingdigital.com/subscribe/

    Thanks much,
    Steve

  4. Remy,

    My stupidity led me to ignore the second line in the file. When I pulled the message text area, I needed to change the:

     $_REQUEST['message']
    

    I’ve switched it to something else. I chose:

     $_REQUEST['email']
    

    One thing I did notice is that the form submits without an e-mail. I figured this should not happen with the above change made to the code. Any thoughts?

    Thanks again,
    Steve

  5. @Steve – I’ve had a look at the link your provided, and the front end looks all present and correct – i.e. all the values are being passed through in the AJAX request properly.

    If you’re missing the value submitted on the server side, I would be inclined to do a bit of debugging – start with:

    var_dump($_REQUEST)

    Just to get an idea of what you’re actually capturing.

    Let me know how you get on.

  6. Remy,

    Can you do me a favor and drop me a line at [email hidden]. It seems as if something in your blog is stripping out code in the posts. Are you on any IM’s?

    Thanks much,
    Steve

  7. I got a better way to do that:

    html file :

    Pagina Index

     <div id="contact">
      <form id="contact_form" method="post" action="javascript:procesareForm();">
      <fieldset title="Contact"> 
        <table>
          <tr>
            <td>
            Nume:
            </td>
            <td>
            <input type="text" name="nume" />
            </td>
           </tr>
           <tr> 
            <td>
             Email: 
            </td>
            <td>
            <input type="text" name="email" />
            </td>
            </tr>
            <tr>
            <td>
             Subiect: 
            </td>
            <td>
            <input type="text" name="subiect" />
            </td>
            </tr>
            <tr>
            <td>
             Mesaj: 
            </td>
            <td>
           <textarea rows="8" cols="50" name="mesaj"></textarea>
            </td>
            </tr>
            <tr>
            <td>
             Newsletter: 
            </td>
            <td>
              <input type="checkbox" name="newsletter" />
            </td>           
          </tr>
          <tr>
           <td colspan="2">
            <input type="submit" name="trimite" value="trimite" />
           </td>
          </tr>
        </table>
        </fieldset>
      </form>
    
     </div>
    

    code js :
    function procesareForm()
    {
    var parametri1 = $(“input”).serialize();
    var parametri2 = $(“textarea”).serialize();
    var parametri = parametri1 ‘&’ parametri2;

    $.ajax({
    type: “POST”,
    url: “php/trimitemesaj.php”,
    data: parametri,
    success: function(msg){
    $(‘#contact’).attr(‘innerHTML’,’Mesajul has been send ‘ msg);
    }
    });

    }

    preloader.js …made by me …maybe a plug in..

    //Pt centrarea preloader ului
    var Page = new Object();
    Page.width;
    Page.height;
    Page.top;
    Page.getPageCenterX = function ()
    {
    var fWidth;
    var fHeight;
    //For old IE browsers
    if(document.all)
    {
    fWidth = document.body.clientWidth;
    fHeight = document.body.clientHeight;
    }
    //For DOM1 browsers
    else if(document.getElementById &&!document.all)
    {
    fWidth = innerWidth;
    fHeight = innerHeight;
    }
    else if(document.getElementById)
    {
    fWidth = innerWidth;
    fHeight = innerHeight;
    }
    //For Opera
    else if (is.op)
    {
    fWidth = innerWidth;
    fHeight = innerHeight;
    }
    //For old Netscape
    else if (document.layers)
    {
    fWidth = window.innerWidth;
    fHeight = window.innerHeight;
    }
    Page.width = fWidth;
    Page.height = fHeight;
    Page.top = window.document.body.scrollTop;
    }
    jQuery().ajaxStart(showPreloader);
    jQuery().ajaxStop(hidePreloader);

    function showPreloader(){
    Page.getPageCenterX();
    $(‘#loading’).show();
    $(‘#loading’).css(‘top’ ,(Page.top Page.height/2)-100);
    $(‘#loading’).css(‘left’,Page.width/2-75);
    $(‘#loading’).css(‘position’,’absolute’);
    }
    function hidePreloader(){
    $(‘#loading’).hide();
    }

    trimitemesaj.php – which insert the message in the database it not send email:
    $value) $$key = $value;
    if ($newsletter==’on’) $newsletter = 1; else $newsletter = 0;

    $sql = “INSERT INTO mesaje
    (nume,email,subiect,mesaj,newsletter)
    VALUES
    (‘$nume’,’$email’,’$subiect’,’$mesaj’,’$newsletter’)”;
    $result = $conexiune->query($sql);

    if ($result)
    {
    echo ‘success’;
    }
    else
    {
    echo ‘invalid’;
    }
    ?>

  8. @Gafitescu – thanks for the huge comment ;-)

    I can’t particularly see how it’s a better implementation, aside from the overlay saying it’s being posted and when it’s complete.

    In particular, the code only handles a finite number of form inputs, i.e. if you add anymore inputs, you need to change your JavaScript. The code I offered allows us to dynamically collect all the inputs on the page:

    $(':input', this).each(function() {
    inputs.push(this.name '=' escape(this.value));
    })

    Finally, and most importantly, your code isn’t accessible. You’ve set the action attribute of the form to the JavaScript. If JavaScript it turned off (the stats say somewhere between 8-15% of users) then the entire form fails and you don’t have your newsletter subscription.

    I hope that feedback all makes sense. Cheers.

  9. $(”input”).serialize(); – you can add as many inputs and textarea as you like…I am serialize the object diffrent…

    I didn’t know that so many users disable js….but I know how to modify it in order to run with disabled js

    Tutorials that you wrote are great..,very inspiring..I write the preloader….can be extended to a plug in?

  10. Please. I need your help. I was working with funtion $.post(…);
    But my php-script use $_REQUEST. When I put $_POST my parameters dont exist. Why??.

    I want to use $_POST How can i get it???

  11. @Harold, it’s a simple change, which should make the variables available in $_POST. The change is in the JavaScript, within the jQuery.ajax() call. I’ve made the change you need in bold below:

    jQuery.ajax({
      data: inputs.join('&'),
      type: "POST",
      url: this.action,
      timeout: 2000,
      error: function() {
      console.log("Failed to submit");
      },
      success: function(r) {
        alert(r);
      }
    });

  12. Hi Remy,

    Thanks for the very informative screencast.

    The typed comments were great :-)

    Mei

  13. Sweet, great demo. This is actually the beste ajax tutorial I have ever seen.

  14. Remy, that rocked.

    Thanks,
    Eamo.

  15. The $(“:input”) trick looks very nice, but it seems it has a drawback:

    Every checkbox in the form, checked or not, will be collected in this way, while on a normal submitted form only the checked checkboxes are submitted. See the difference? Catastrophic when processing data on the serverside.

    So if you are using checkboxes (and perhaps some other elements like radiobuttons) in your form, stay away from :input. There is a Selectors Plugin for jquery that gives a bit more control. http://www.softwareunity.com/sandbox/JQueryMoreSelectors/

  16. Great tutorial, Remy! Thanks! I’m a noob, and this really helped me out.

  17. Hi!
    Nice tutorial. Seems I’m the only one that can’t get additional fields to work. I tried to add some radio buttons. But they are not automatically collected. Sorry for being such a moron. :)

    Fyll i i fälten nedan
    Platform:
    Mac
    Pc
    Linux
    Annan

            <label for="email">E-postadress:</label> <input type="text" name="email" value="" id="email" /><br />
            <label for="name">Namn:</label> <input type="text" name="name" value="" id="name" /><br />
            <label for="message">Meddelande:</label>
            <textarea name="message"></textarea>
            <p><input type="submit" value="Skicka" /></p>
          </fieldset>
        </form>
    
  18. Great script and excellent ScreenCast!

    I’ve got one question for you though. I’m using a form where the widely used TinyMCE is working it’s magic on my text-area. When it does so, jQuery can’t see what has been written in the textfield.

    Do you know how to get this working? :)

    Sincerely,
    Magnus

  19. @Magnus – I use TinyMCE for a few of my projects, so I might be able to answer. If you run the following code, it commits what’s in TinyMCE to the textarea:

    tinyMCE.triggerSave();

    I would probably make that the first thing that happens when the submit method is called.

  20. So what happens when IE overrides and actually runs the Submit?

    What I mean is – my form is running an external php file:

    So IE navigates to the php file on Submit. Why am I not surprised…

    FF and Safari don’t though. Is there a way stop IE from running the Submit?

  21. Yeah, I’ve into exactly the same troubple with submitting a form on IE. FF works fine. Any ideas?

    Thanks in advance!

  22. @wtc & @narko – I’m pretty certain you’ve got an error in the JavaScript – which is causing the form to submit.

    Reason being is that if you return false; to the submit event, it won’t submit the form.

    However, if there’s an error in the JS, it will submit the form.

    First things first, change the following line in the code from:

    error: function() {
      console.log("Failed to submit");
    },

    to:

    error: function(xhr, desc, e) {
      alert("Failed to submit: " + desc);
    },

    This should help debug the problem in IE.

  23. i can’t get it work :(

    Error in jquery.js line 4695

    xml.send(s.data);

    i used exactly the code that u show

  24. [...] Ajax+Forms mit ‘jQuery’ .. schöner Screencast: jQuery AJAX’ed forms Gruss, tecM0 __________________ "A good programmer is someone who looks both ways before [...]

  25. [...] fazer seu primeiro formulário Ajax e ver como o jQuery poupa tempo do desenvolvedor. Vale a pena! Referência. Guardar em:   « Leitor de RSS para o Evolution | [...]

  26. Just a point on this I kept getting an error saying “setting a property that has only a getter”. After investigation I found it was because i had an input called action. This error is caused when you try to edit a read only dom element so i can only assume that this is interferes with the action attribute of the form

  27. Hi Remy, thanks for putting this up, it’s given me a better understanding of how this all works!

    There were two things I wanted to check if I was misunderstanding:

    • There doesn’t seem to be much error checking, am I wrong? It still submits without any content when you have Javascript turned off.

    • When it does submit, you get a popup that says “your message has been sent”, but it doesn’t redirect to a new page or anything.

    Here is my version, it has literally been copied from your example:
    http://www.method.com.au/contactTest.php

  28. @Paul – the demo was created to show how easy and quickly you can add a dash of Ajax to a form using a screencast.

    I wouldn’t recommend you add that exact code for your own contact page for a few reasons: 1) it’s unstyled, 2) it doesn’t go through to a proper thank you page, 3) the server-side check it limited (think about email injection), 4) the Ajax response could be a lot nicer.

    For a much more complete example of Ajax in a form, have a look at my populating select boxes post. It starts with the non-JS version, then graduates to a fully Ajax’ed solution.

  29. great screencast – but i can’t seem to get the script working. im a noob to php/jquery so im not quite sure where im going wrong. i’m suspecting it might be the $header value – what should i be putting as the mail address if i pay for an account with powweb?

    also when you say that we shouldn’t use this exact code for the contact form, do you know of any good link to scripts which we could implement.

    thanks!

  30. i just got the script working so dont worry about answering me first question.

    i’d still love to know if anyone has any advise on a good secure php mail script to use

  31. Thanks for your reply Remmy. I’ve found a different script to use for the actual form bits.

    Hi Nooby, if you are interested, here is the script I am using:
    http://www.digital-web.com/articles/bulletproof_contact_form_with_php/

    It doesn’t have error checking added though, so I’m trying to find that now!

  32. Sorry, that link didn’t come in properly, so try this:
    http://tinyurl.com/2f8z33

  33. Hi, thanks for your tutorial, its great!.

    But i found one problem with IE6:

    If I send example “alert(“some problem”);” with Firefox OK, with Opera OK, but with IE6 no send alert to Screen… why??

    If need more informations, added all code I’m used for this script :)

  34. Instead of having to specify the method in the jquery code I added in

    type: this.method,

    so both action and method are taken directly from the form.

    Thanks for the nice screencast!

  35. Great screencast remy. Cant wait to try it out!

  36. Thanx for your screencast!
    I wondered for some months, if I should use some AJAX functionalities in my CMS – and use JavaScript. I heavily remember the browser-wars and JavaScript-incompatibilities of the 90es and avoid JavaScript at all. My server does the code, clean and straight, not the browser – I still don’t trust them.

    But the Web is a user thing, user have to feel comfortable. For user-guidance and rich user interfaces I need AJAX. On the new devices like iPhone or iPod touch Web-applications are indistinguishable to “normal” applications and will be used like these.
    I know. But JavaScript? :-(…..

    Thanx, your blog inspired me to implement the first script on the same afternoon. ;-)

    Marcus

  37. Great screencast. Just wondering how I would go about changing the successful Alertbox to something more useful. Say I have a DIV set to visibility: hidden that contains some text. How would I be able to change that DIV to now be set to visible while adding some transitioning effects like a fade or slide?

  38. Hey, thanks for the tutorial, you did a great job of explaining things. Been meaning to add ajax to forms using jQuery for a while and this really helped me out.

    James

  39. hi remy,

    this tut has helped me a ton. I’m having a really hard time figuring out how to get the response into something other than an alert though. I want to populate it into something in the DOM.

    I wrote it this way, which didn’t work:
    success: function(r) {
    $(‘#content’).html(r);
    }

    Can you give me a clue?

  40. @Todd – that code looks okay. Assuming the r object is string of HTML.

    Best thing to do is test it with Firebug and put a break point on the $(‘#content’) line. You can then inspect the ‘r’ variable.

    Also, if it’s not getting in to that block of code, it might be worth adding an error handle or even the complete handler – have a look at the options on http://docs.jquery.com/Ajax/jQuery.ajax

  41. 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

  42. 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!

  43. 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

  44. 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

  45. @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.

  46. 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.

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

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

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

  49. 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.

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