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
← Older Comments
  • http://vfxboy.co.cc ganesh

    I tried it out and works great in my site, http://bit.ly/7VLXdc

    • http://vfxboy.co.cc ganesh
    • http://www.facebook.com/profile.php?id=100000494065144 Aldy

      what a joy to read Jo, I am so tilerlhd for you to find your true direction brings a sense of peace and focus you never imagined. We are embarking an change too, dropping the name of the established business we purchased 12 months ago, and trading under our brand name that means so much more to us and is our passion. How exciting we are taking the step into this exciting future together, looking forward to seeing your business flourish and I just know ours will too!

  • Black

    I always get this error:

    Fatal error: Cannot instantiate non-existent class: mysqli in /home/www/web372/html/comment/getItemsFromDatabase.php on line 5

    help PLEASE!

    • Riya

      PHP always some problem everyday !!

      Start using Asp.Net the best in the World !!!

    • http://mloberg.com Matthew Loberg

      It looks like MySQL Improved is not installed on your system. So you would either need to install it or just use mysql_connect.

  • Tom

    Please help!

    I followed up this tutorial step by step and I cannot add any comment to my database. I can retrieve information from database, but I cannot add anything.
    I am not getting any errors or warnings.
    I reviewed day11 of ‘diving into php’ and everything works fine. I can either add or get info from database. In this case when I click on ‘Post comment’ with filled form nothing happens, no information is added to the database.
    The code I used is exactly the same as Jeffrey did. The database has been also created the same way.
    Please help!

  • http://wiki.openqa.org/display/~%25D0%25BA%25D1%2583%25D0%25BF%25D0%25B8%25D1%2582%25D1%258C%2B%25D0%25B2%25D0%25B8%25D0%25B0%25D0%25B3%25D1%2580%25D1%2583 Anonymous
    • http://none Glenda Marie

      This add comment aplication include the reply Button?

  • http://www.maintuts.info Tyler Spears

    How do I this to an existing webpage, like the comment section this is in?
    Thanks

  • Sinfonia

    That’s so cool I was looking for comments HTML and I found more here .

    Thanx :)

  • http://www.aberto24hrs.blogspot.com Moosh Massacre

    tnx for sharing!

  • Per Wikman

    Great tutorial, but what about escaping html entities? If you type say alert(‘hello world’) in the name field, that script is going to run on the site. Of course, if you’ve escaped it with php then it shouldn’t be a major problem and the rest of the site won’t be affected. Yet it is slightly unsettling to let it slip by. Any fix for that?

  • Daniel

    Great tutorial, but i´ve this problem. Please helpme!

    Warning: Cannot modify header information – headers already sent by (output started at /home/name/public_html/ajaxComment/leaveComment.php:21) in /home/name/public_html/ajaxComment/leaveComment.php on line 24

  • Harfleur

    This is really useful, thanks!

  • hiuyu

    how can the newest post appears at the top after submit?
    how can it support input in CHINESE name in the name area?

  • http://crialxperiments.co.cc/ajaxcomnts/ Lash

    Hello very nice the tutorial but I have a problem

    When I login to comment this page I load in the commentary,
    if you could see my page to see what I’m talking and I can help.

    thanks

  • http://www.sapconinstruments.com Level Switch

    This is nice and very interesting. Instant feedback mechanisms do take out a lot of pain from the contact forms.

  • ken

    nice one

  • http://www.fakeoakleyssunglassess.com/ fake oakley

    Instant feedback mechanisms do take out a lot of pain from the contact forms.

  • malik

    how to add an comment box in a non uploaded website, i mean for a nonpurchased domain.

  • Leandro

    Muito Bom!!

  • Edgar Lopez

    Ican’t see the screencast???

    Help a tried in all my explorers: firefox, chrome, opera and even IE

  • George

    MAJOR TROUBLE!!!

    when I implemented this into its own page it was functioning fine. However when I then try to implement this into my project management website it does not function correctly.

    When I post a comment it does not post it vertically at an even rate, it starts posting it horizontally and on top of one another..?!?!?!

    On the website we are using jquery tabs so I am wondering whether this is causing a clash for the provided in the tutorial??

    Thanks for any help in advance, below is the tab with the discussion board code within it :)

    Discussion Board

    Leave a Comment

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

    <?php if(isset($error)) echo "Please fill out each field correctly.”; ?>

    $(‘#submit’).click(function() {

    var name = $(‘#name’).val().replace(/[^\w\d ]+/gi, ”),
    comment = $(‘#comment’).val();

    if(name.length < 2 || comment.length < 4) {
    if($('.error').length === 0) {
    $('form').append('Please fill out each field.’);
    }
    return false;
    }

    $.post(
    ‘leaveComment.php’, {

    ‘name’ : name,
    ‘comment’ : comment
    },

    function(r) {
    $(‘.error’).fadeOut(200);

    $(”)
    .appendTo(‘#addComment’)
    .fadeIn(1000, function() {
    $(‘#comments’)
    .append(” + r + ”)
    .children(‘:last’)
    .height($(‘#comments li:last’).height())
    .hide()
    .slideDown(800, function() {
    var bodyHeight = $(‘html’).height();
    $(‘#addComment’).fadeOut(1000, function() {
    $(‘html’).height(bodyHeight);
    $(‘h2#leaveAComment’).fadeOut(200, function(){$(this).text(‘Thank you for your comment!’).fadeIn(200)});
    });
    });
    });
    }

    ); // end post

    return false; // disable submit click

    });

  • mutebi

    Hi guys, i love your work! I wish i could get some one to make my university App more better with more Ajax. Is there anyone interested in being part of the app?

  • http://www.facebook.com/luiz.felipe.125 Luiz Felipe

    great tutorial

← Older Comments