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
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!
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
I tried it out and works great in my site, http://bit.ly/7VLXdc
use this link http://ganirockz.cphoster.com/video%20pages/demoHD.php
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!
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!
PHP always some problem everyday !!
Start using Asp.Net the best in the World !!!
It looks like MySQL Improved is not installed on your system. So you would either need to install it or just use mysql_connect.
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!
This add comment aplication include the reply Button?
How do I this to an existing webpage, like the comment section this is in?
Thanks
That’s so cool I was looking for comments HTML and I found more here .
Thanx :)
tnx for sharing!
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?
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
This is really useful, thanks!
how can the newest post appears at the top after submit?
how can it support input in CHINESE name in the name area?
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
This is nice and very interesting. Instant feedback mechanisms do take out a lot of pain from the contact forms.
nice one
Instant feedback mechanisms do take out a lot of pain from the contact forms.
how to add an comment box in a non uploaded website, i mean for a nonpurchased domain.
Muito Bom!!
Ican’t see the screencast???
Help a tried in all my explorers: firefox, chrome, opera and even IE
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
});