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.











User Comments
( ADD YOURS )Yosy November 6th
First!!!
Waiting for the FLV version
( )Jeffrey Way November 6th
Uploading right now. 20 minutes.
( )Daniel Groves November 6th
Do you have another version which I can watch while the FLV is uploading?
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?
Jeffrey Way November 6th
I just added an FLV version, that will allow you to download the file as well (look towards the bottom).
Stoian Kirov November 6th
Nice
( )Thanks Jeffrey!
Stoian Kirov November 6th
oops

( )I replied by mistake
Sorry
Moksha Solutions November 6th
thanks for tutorial its really wonderfull
( )Anil Kiral November 6th
This is an amazing tutorial. I will make some amazing stuff with this.
( )Thanks very much..
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.
Burak November 6th
I was thinking about the same thing. This could be added to a Wordpress theme, or maybe even as a plugin.
( )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?
( )reg4c November 6th
Ah, the joy of realizing that someone else has already asked the exact same question. Please ignore.
( )Jeffrey Way November 6th
Try this:
http://blip.tv/file/2817301?file_type=flv
esranull November 6th
very nice thanks post
( )Alex Högberg November 6th
Good one Jeff!
Loved the animations, and thanks for the loader page
( )Gabriel November 6th
its a good video ! but a little large
( )Jeffrey Way November 6th
Well it’s an hour long.
( )Jeff November 6th
Just what I was looking for..
( )ibrahim K November 6th
very nice thank…
( )Alex November 6th
Thanks,
( )this is very helpful
Ali Baba November 6th
Nice Tut. I just wondering when next Codeigniter tut will be available
( )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.
( )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.
( )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!?
( )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!
( )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.
( )Colin November 6th
Nevermind. Apparently it’s just in the first few minutes of the video.
( )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
( )Dimby November 6th
I watched the whole tutorial and you did turn on your warnings after all
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
( )Jeffrey Way November 6th
True – nice point.
a77icu5 November 6th
Thanks Mr. Jeffrey Way
Note: we miss the code igniter tutorials from scratch xD .
( )Paul du Long November 6th
Me2
( )Jeffrey Way November 6th
Coming soon fellas! I’m trying to think of an interesting app to build.
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?
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.
Kwaa November 6th
Kwaa November 7th
nice work there, jeff. keep it up.
( )Kwaa November 7th
huhu, triple comment.
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.
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!
( )Yoosuf November 7th
Jeff thanks for the if(is_ajax){} trick, it was really useful
Yoosuf
( )http://eyoosuf.com
Cerium November 7th
Nice screencast Jeffrey, but I’ve a question, why don’t you use $(’#addComment form’).submit(), instead of $(’#submit’).click() ?
( )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 ……….
( )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…
( )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
( )Tutorial City November 7th
Isn’t it a good idea to begin the javascript using $(document).ready() ?
Another very cool tutorial as always!
( )Jeff November 8th
If you place your scripts at the bottom of the page, there’s no need for that.
( )Rata November 7th
You may mumble your words as much as you like
…
this screencast is great!
ThanX
( )Kind regards
Rata
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.
( )tutorial blog November 7th
thank for code
( )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.
( )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!
( )Hello November 8th
Okay, well, this site likes to strip the code I put in, oh well guys!
( )bopjo November 9th
Damn….I’d really like to know this. Can you email it? david@bopjodesign.com
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.
( )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.
( )Joshua Spillers November 10th
Where the default values would go in the form fields, use something like this:
value=”"
( )Joshua Spillers November 10th
I KNEW that wasn’t going to work… Check out Dimby’s post above.
( )Irene November 8th
Wow. Great!!!
( )John November 9th
This was VERY helpful. Many thanks!
( )David Moreen November 9th
I love that aJax, plus when you add animated gifs. Way to get my blood flowing.
( )Roy Ho November 10th
Very nice tutorial! Keep it up!
( )Joshua Spillers November 10th
Another great tutorial. Thanks, Jeffrey!
( )Michael November 10th
Hey very nice Tut! It will be very helpfull for me
( )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!
( )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.
( )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
( )josh November 12th
Noob question alert:
How would I go about reversing the order, whereby the newest loads on top?
( )helloworlder November 12th
Thanks! Had absolutely no trouble understanding you. explained everything so well.
( )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
( )l4yn3 November 18th
learn a lot.
( )