Learn how to AJAXify your Comment Forms

Learn how to AJAXify Comment Forms

Nov 6th in Screencasts by Jeffrey Way

In this week's video tutorial, I'll teach you how to take a simple, boring contact form and add some animations and an AJAX post request to submit the form to your MySQL database asynchronously.

In addition, we'll also implement a bit of server and client-side validation to better secure our data. When submitting to the database, we'll also review the most secure methods, including the use of prepared statements, which will bind the necessary values to each query, rather than embed them.

PG

Author: Jeffrey Way

Hi, I'm Jeff. I'm the editor of Nettuts+, and the Site Manager of Theme Forest. I spend too much time in front of the computer and find myself telling my fiance', "We'll go in 5 minutes!" far too often. I just can't go out to dinner while I'm still producing FireBug errors...drives me crazy. During my free time, I sporadically write articles for my own personal blog. If it will keep you in the good graces of the church, follow us on Twitter.

Screencast

*Note - please forgive me, but I had a slight cold when recording this. I apologize if my words are a bit mumbled.

Other Viewing Options

Conclusion

Example

This screencast demonstrated just one way to animate your contact forms. Truthfully, it's probably a bit too much for a regular site! :) But we're here to have fun with it. If you decide to implement something like this into your own site, perhaps a more toned down version, please do leave a comment with a link to the page for our review!


Related Posts

Check out some more great tutorials and articles that you might like

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )
  1. PG

    Yosy November 6th

    First!!!

    Waiting for the FLV version

    ( Reply )
    1. PG

      Jeffrey Way November 6th

      Uploading right now. 20 minutes. :)

      ( Reply )
      1. PG

        Daniel Groves November 6th

        Do you have another version which I can watch while the FLV is uploading?

      2. PG

        Yosy November 6th

        I can`t use the version that you have posted because I can`t watch at full screen..

        That means I am turning on the full screen and then In the middle I have the video at his normal size (not stretched) and at the FLV I can watch at full screen.

        This is only happens to me?

      3. PG

        Jeffrey Way November 6th

        I just added an FLV version, that will allow you to download the file as well (look towards the bottom).

    2. PG

      Stoian Kirov November 6th

      Nice :)
      Thanks Jeffrey!

      ( Reply )
  2. PG

    Stoian Kirov November 6th

    oops :P
    I replied by mistake :)
    Sorry ;)

    ( Reply )
  3. PG

    Moksha Solutions November 6th

    thanks for tutorial its really wonderfull

    ( Reply )
  4. PG

    Anil Kiral November 6th

    This is an amazing tutorial. I will make some amazing stuff with this.
    Thanks very much..

    ( Reply )
  5. PG

    Robbert November 6th

    Great, thanks! Haven’t done the complete screencast yet – wouldn’t let this opportunity to be one of the first to comment pass by. ;-)
    Anyway, I’m still pretty new to Ajax, but will take some time to figure out how I can add this functionality into the WordPress theme I’m creating.

    ( Reply )
    1. PG

      Burak November 6th

      I was thinking about the same thing. This could be added to a Wordpress theme, or maybe even as a plugin.

      ( Reply )
  6. PG

    reg4c November 6th

    Hey Jeff,

    I am watching this right now but the buffering is killing me and the player does not allow me to forward through to a part that was not download. Any way for a non-iTunes download link?

    ( Reply )
    1. PG

      reg4c November 6th

      Ah, the joy of realizing that someone else has already asked the exact same question. Please ignore.

      ( Reply )
  7. PG

    esranull November 6th

    very nice thanks post

    ( Reply )
  8. PG

    Alex Högberg November 6th

    Good one Jeff!

    Loved the animations, and thanks for the loader page :)

    ( Reply )
  9. PG

    Gabriel November 6th

    its a good video ! but a little large :P

    ( Reply )
    1. PG

      Jeffrey Way November 6th

      Well it’s an hour long.

      ( Reply )
  10. PG

    Jeff November 6th

    Just what I was looking for.. ;-)

    ( Reply )
  11. PG

    ibrahim K November 6th

    very nice thank…

    ( Reply )
  12. PG

    Alex November 6th

    Thanks,
    this is very helpful

    ( Reply )
  13. PG

    Ali Baba November 6th

    Nice Tut. I just wondering when next Codeigniter tut will be available

    ( Reply )
  14. PG

    Imamu Hunter November 6th

    That’s an awsome tutorial.

    I can’t wait until someone does a tutorial on those sliding navigation bar. The ones that the highlight object follows whatever is hovered over and when you click it, it stays.

    I want to create a template with that in it.

    If you know of one send me a link to info@lavishimage.com.

    ( Reply )
    1. PG

      Robert November 9th

      Imamu Hunter, that’s actually the lavalamp plugin. Please answer to this post if you would like me to write a tutorial here for it.

      ( Reply )
  15. PG

    Hannes November 6th

    Nice!

    But isn´t the isset($_POST[$key]) at 13:30 in line 7 somehow unneccesary because items only show up in the $_POST Array if they are set!?

    ( Reply )
  16. PG

    Drew Douglass November 6th

    Great work Jeffrey, I’m glad PHP-Tips could be of some inspiration. The effect comes built in with the theme for the CMS (chyrp), so sadly, I can’t take credit. Way to take it to the next level! :)

    ( Reply )
  17. PG

    Colin November 6th

    Does anyone else have trouble with the video player? Every time I try and scrub forward the video just fades out and it shows the replay button. I have to watch the whole thing beginning to end.

    ( Reply )
    1. PG

      Colin November 6th

      Nevermind. Apparently it’s just in the first few minutes of the video.

      ( Reply )
  18. PG

    Dimby November 6th

    Hi,

    You should check if the POST value exists … otherwise it will give a warning ;)

    Solution:

    It will check if there is any POST value submitted with the key”field”. If it exists it will show the value of the POST array otherwise it will display “Your name here” in the textbox.

    $var1 ? $action2 : $action1;

    Is the same as:

    if( $var ){
    $action2;
    }else{
    $action1;
    }

    If you don’t get any warnings and you don’t using this method, or any similar method you probably turned of the php warnings. To turn these on check your MAMP/WAMP settings or use above the page.

    – Dimby

    ( Reply )
    1. PG

      Dimby November 6th

      I watched the whole tutorial and you did turn on your warnings after all :P
      I learned some new things today, thanks!

      One small thing, when you check for an error in the userinput php you created an error variable. You can also check is the $post array had any value’s with the count function. count($post) must return 1 otherwise somethings wrong ;) .

      – Dimby

      ( Reply )
      1. PG

        Jeffrey Way November 6th

        True – nice point.

  19. PG

    a77icu5 November 6th

    Thanks Mr. Jeffrey Way

    Note: we miss the code igniter tutorials from scratch xD .

    ( Reply )
    1. PG

      Paul du Long November 6th

      Me2 :(

      ( Reply )
      1. PG

        Jeffrey Way November 6th

        Coming soon fellas! I’m trying to think of an interesting app to build. :)

      2. PG

        w1sh November 6th

        I made it to 8 mins before I got confused and vomited mom’s spaghetti all over my sweater.

        Think us retards could get some very simple screenr tuts on PHP?

      3. PG

        Slobodan Kustrimovic November 7th

        First of all, great screencast, thanks Jeffrey.

        About the codeigniter, i’m really looking forward to the next one. Maybe a little tutorial how to use some of the many authentication libraries for codeigniter.

  20. PG

    Kwaa November 6th

    ( Reply )
    1. PG

      Kwaa November 7th

      nice work there, jeff. keep it up.

      ( Reply )
      1. PG

        Kwaa November 7th

        huhu, triple comment.

  21. PG

    Jay November 6th

    Hi Jeff,

    Another great tutorial!
    You know that problem you were having with the “li” item withing the “ul#comments” when you slid it down it would jump, well you fixed it by defining the height in jQuery, but all you need to do is define a width for the “li” in the stylesheet and that resolves the problem.

    ( Reply )
  22. PG

    leo rapirap November 6th

    very informative video.

    i’ve been looking screencast in validating forms both client and server side
    and found it in this video.

    learned a lot!

    Thanks Jeff!

    ( Reply )
  23. PG

    Yoosuf November 7th

    Jeff thanks for the if(is_ajax){} trick, it was really useful

    Yoosuf
    http://eyoosuf.com

    ( Reply )
  24. PG

    Cerium November 7th

    Nice screencast Jeffrey, but I’ve a question, why don’t you use $(’#addComment form’).submit(), instead of $(’#submit’).click() ?

    ( Reply )
  25. PG

    EvilCerium November 7th

    Well NAH, what if you press enter to submit, #submit HASNT BEEN CLICKED. its COMMON SENSE to submit a form WHEN IT HAS BEEN SUBMITTED and not button click ……….

    ( Reply )
  26. PG

    Ionut Bucur November 7th

    Amazing tutorial, thanks Jeffrey!
    Good video, the code is easy readable on the full screen.

    In the file leaveComment.php (downloaded) you miss the else statement on line 24 – else { header(’location….. } so it displays twice the page…

    ( Reply )
    1. PG

      PandaMaster November 7th

      thankyou! I was going through the code to figure out why it loaded the whole page into the comments and stuff. saved me some time :D

      ( Reply )
  27. PG

    Tutorial City November 7th

    Isn’t it a good idea to begin the javascript using $(document).ready() ?

    Another very cool tutorial as always! ;)

    ( Reply )
    1. PG

      Jeff November 8th

      If you place your scripts at the bottom of the page, there’s no need for that.

      ( Reply )
  28. PG

    Rata November 7th

    You may mumble your words as much as you like :)
    this screencast is great!

    ThanX
    Kind regards
    Rata

    ( Reply )
  29. PG

    Erik Zettersten November 7th

    One small thing,

    Creating an animation after someone clicks the submit button isnt exactly helping the user with the “how long does this take” feedback.

    Although I think what you have there is really cool, I dont think its applicable in real world applications.

    For example, what if the server hangs and what you have there is the only thing users see. Those users could and might navigate off teh page without the post effecting the DB.

    Wouldn’t it be more practical to add this animation to actual loading sequence?

    Again, nothing wrong with this option… it looks great, but…. you know…

    Great screen cast, I loved it…

    P.S – One of your very old ASP.NET screen casts has it where you create a that shows exactly what I’m trying to say… That being more practical and sending the correct feedback to the user.

    ( Reply )
  30. PG

    tutorial blog November 7th

    thank for code

    ( Reply )
  31. PG

    AA November 8th

    Thanks Jeff for this nice tutorial.

    Please resume the CodeIgniter tutorials. Could you please use AJAX in your next CI tutorial.

    Thanks again.

    ( Reply )
  32. PG

    Hello November 8th

    If you get an error like this:

    Notice: Undefined index: comment in C:\wamp\www\comments\index.php on line 127 – 129

    Which is this line(s):
    <input type="text" id="name" name="name" value="” />
    <input type="text" id="email" name="email" value="” />

    (sorry for the code is messed out)

    Just use this fix: (Line 127)

    <input type="text" id="name" name="name" value="” />

    And this one: (line 128)

    <input type="text" id="email" name="email" value="” />

    Finally: (Line 129)

    Enjoy!

    ( Reply )
    1. PG

      Hello November 8th

      Okay, well, this site likes to strip the code I put in, oh well guys!

      ( Reply )
      1. PG

        bopjo November 9th

        Damn….I’d really like to know this. Can you email it? david@bopjodesign.com

  33. PG

    bopjo November 8th

    Thanks for this great tutorial. I’ve always wondered how to do this and find it very impressive whenever I encounter it on web sites. This is a great thing to have in one’s skill set as a web designer/developer. I love how it combines so many different technologies. Very cutting edge. Thanks again.

    ( Reply )
  34. PG

    bopjo November 8th

    When I try this on my own local testing computer I get this kind of thing displayed in the form fields when the page loads:

    Notice: Undefined index: comment in C:\htdocs\Tutorials\ajaxComment\index.php on line 129

    If I fill out the fields anyway the info is inserted in the DB but the ajax reloading of the page hangs up and things get wacky. If I refresh the page, my post is displayed.

    Any thoughts or solutions would be appreciated.

    ( Reply )
    1. PG

      Joshua Spillers November 10th

      Where the default values would go in the form fields, use something like this:

      value=”"

      ( Reply )
    2. PG

      Joshua Spillers November 10th

      I KNEW that wasn’t going to work… Check out Dimby’s post above.

      ( Reply )
  35. PG

    Irene November 8th

    Wow. Great!!!

    ( Reply )
  36. PG

    John November 9th

    This was VERY helpful. Many thanks!

    ( Reply )
  37. PG

    David Moreen November 9th

    I love that aJax, plus when you add animated gifs. Way to get my blood flowing.

    ( Reply )
  38. PG

    Roy Ho November 10th

    Very nice tutorial! Keep it up!

    ( Reply )
  39. PG

    Joshua Spillers November 10th

    Another great tutorial. Thanks, Jeffrey!

    ( Reply )
  40. PG

    Michael November 10th

    Hey very nice Tut! It will be very helpfull for me

    ( Reply )
  41. PG

    Rodrigo Flores November 10th

    Wow! This is got to be the longest tutorial/screencast I’ve seen you do. Out of curiosity, is it? if not, which one?

    Thanks again Jeff, you covered a lot!

    ( Reply )
  42. PG

    Greg McAusland November 10th

    Nice one Jeff, picked up a few gems in there.

    Like the php javascript test, didn’t know about that one, but it tied in beautifully with this project.

    ( Reply )
  43. PG

    Sean November 11th

    You are insanely good at this!!!

    I hope to have you skills one day. I have been watching a lot of tutorials on PHP etc but I don’t seem to be soaking it up very quickly!!!
    It’s frustrating!

    I will keep watching your videos though and hope it clicks one day!

    Thanks Jeff

    ( Reply )
  44. PG

    josh November 12th

    Noob question alert:

    How would I go about reversing the order, whereby the newest loads on top?

    ( Reply )
  45. PG

    helloworlder November 12th

    Thanks! Had absolutely no trouble understanding you. explained everything so well.

    ( Reply )
  46. PG

    WebQueen November 18th

    This is a great tutorial, thanks for sharing. I’m however getting an error when trying to post a comment. It reads “Column ‘name’ cannot be null”. I’m passing the first parameter into the prepare as NULL and the next three as ‘?’. Anyone have similar issue

    ( Reply )
  47. PG

    l4yn3 November 18th

    learn a lot.

    ( Reply )
  1. Arrow
    Gravatar

    Your Name
    November 18th