Try Tuts+ Premium, Get Cash Back!
Learn how to AJAXify your Comment Forms
videos

Learn how to AJAXify Comment Forms

on Nov 6th 2009 with 103 comments

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.

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!


 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • Yosy

    First!!!

    Waiting for the FLV version

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Uploading right now. 20 minutes. :)

      • http://inspiredbywordpress.co.uk Daniel Groves

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

      • Yosy

        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?

      • http://www.jeffrey-way.com Jeffrey Way
        Author

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

    • Stoian Kirov

      Nice :)
      Thanks Jeffrey!

  • Stoian Kirov

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

  • http://mokshasolutions.com Moksha Solutions

    thanks for tutorial its really wonderfull

  • Anil Kiral

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

  • http://www.joomblocks.com Robbert

    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.

    • http://www.phpandstuff.com Burak

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

  • reg4c

    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?

  • http://os.laroouse.com esranull

    very nice thanks post

  • Alex Högberg

    Good one Jeff!

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

  • Gabriel

    its a good video ! but a little large :P

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Well it’s an hour long.

  • Jeff

    Just what I was looking for.. ;-)

  • ibrahim K

    very nice thank…

  • http://www.nucleargorilla.com Alex

    Thanks,
    this is very helpful

  • Ali Baba

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

  • http://LavishImage.com Imamu Hunter

    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.

    • Robert

      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.

  • Hannes

    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!?

  • http://dev-tips.com Drew Douglass

    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! :)

  • Colin

    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.

    • Colin

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

  • Dimby

    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

    • Dimby

      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

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        True – nice point.

  • a77icu5

    Thanks Mr. Jeffrey Way

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

    • Paul du Long

      Me2 :(

      • http://www.jeffrey-way.com Jeffrey Way
        Author

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

      • w1sh

        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?

      • http://tutsvalley.com Slobodan Kustrimovic

        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.

  • Kwaa
    • Kwaa

      nice work there, jeff. keep it up.

      • Kwaa

        huhu, triple comment.

  • Jay

    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.

  • leo rapirap

    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!

  • http://blog.eyoosuf.com Yoosuf

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

    Yoosuf
    http://eyoosuf.com

  • Cerium

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

  • EvilCerium

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

  • http://www.k-design.ro Ionut Bucur

    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…

    • http://talosmedia.net/ PandaMaster

      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

  • http://tutorial-city.net/ Tutorial City

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

    Another very cool tutorial as always! ;)

    • http://net.tutsplus.com Jeff

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

  • http://tuvidaloca.net Rata

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

    ThanX
    Kind regards
    Rata

  • http://zettersten.com Erik Zettersten

    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.

  • http://tutorialblog.info/ tutorial blog

    thank for code

  • AA

    Thanks Jeff for this nice tutorial.

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

    Thanks again.

  • Hello

    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!

    • Hello

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

      • http://www.bopjodesign.com bopjo

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

  • http://www.bopjodesign.com bopjo

    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.

  • http://www.bopjodesign.com bopjo

    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.

    • Joshua Spillers

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

      value=”"

    • Joshua Spillers

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

  • http://thx2madre.tistory.com Irene

    Wow. Great!!!

  • John

    This was VERY helpful. Many thanks!

  • http://spotdex.com/ David Moreen

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

  • http://designintheraw.com Roy Ho

    Very nice tutorial! Keep it up!

  • Joshua Spillers

    Another great tutorial. Thanks, Jeffrey!

  • http://www.ifoneapps.de Michael

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

  • http://thwdg.com Rodrigo Flores

    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!

  • http://www.alittlephotoshop.com/ Greg McAusland

    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.

  • Sean

    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

  • josh

    Noob question alert:

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

    • http://cloudica.net/ Sam J

      I would like to know this aswell.

      • http://blackmjck.net Steven W

        Just use prepend() instead of append(). :-)

  • http://www.helloworlder.com helloworlder

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

  • WebQueen

    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

  • l4yn3

    learn a lot.

  • carlos

    learn a lot too, really

  • http://www.peperuka.com/ TheBigBoss

    Example on how to integrate it into WP would be nice !
    But thanks for this tutorial

  • http://twitter.com/aelien Alan C

    What is he using for the Lorem autocomplete.. thing ? Is it textexpander?

Newer Comments →