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
First!!!
Waiting for the FLV version
Uploading right now. 20 minutes. :)
Do you have another version which I can watch while the FLV is uploading?
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?
I just added an FLV version, that will allow you to download the file as well (look towards the bottom).
Nice :)
Thanks Jeffrey!
oops :P
I replied by mistake :)
Sorry ;)
thanks for tutorial its really wonderfull
This is an amazing tutorial. I will make some amazing stuff with this.
Thanks very much..
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.
I was thinking about the same thing. This could be added to a WordPress theme, or maybe even as a plugin.
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?
Ah, the joy of realizing that someone else has already asked the exact same question. Please ignore.
Try this:
http://blip.tv/file/2817301?file_type=flv
very nice thanks post
Good one Jeff!
Loved the animations, and thanks for the loader page :)
its a good video ! but a little large :P
Well it’s an hour long.
Just what I was looking for.. ;-)
very nice thank…
Thanks,
this is very helpful
Nice Tut. I just wondering when next Codeigniter tut will be available
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.
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.
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!?
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! :)
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.
Nevermind. Apparently it’s just in the first few minutes of the video.
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
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
True – nice point.
Thanks Mr. Jeffrey Way
Note: we miss the code igniter tutorials from scratch xD .
Me2 :(
Coming soon fellas! I’m trying to think of an interesting app to build. :)
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?
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.
nice work there, jeff. keep it up.
huhu, triple comment.
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.
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!
Jeff thanks for the if(is_ajax){} trick, it was really useful
Yoosuf
http://eyoosuf.com
Nice screencast Jeffrey, but I’ve a question, why don’t you use $(‘#addComment form’).submit(), instead of $(‘#submit’).click() ?
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 ……….
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…
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
Isn’t it a good idea to begin the javascript using $(document).ready() ?
Another very cool tutorial as always! ;)
If you place your scripts at the bottom of the page, there’s no need for that.
You may mumble your words as much as you like :) …
this screencast is great!
ThanX
Kind regards
Rata
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.
thank for code
Thanks Jeff for this nice tutorial.
Please resume the CodeIgniter tutorials. Could you please use AJAX in your next CI tutorial.
Thanks again.
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!
Okay, well, this site likes to strip the code I put in, oh well guys!
Damn….I’d really like to know this. Can you email it? david@bopjodesign.com
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.
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.
Where the default values would go in the form fields, use something like this:
value=”"
I KNEW that wasn’t going to work… Check out Dimby’s post above.
Wow. Great!!!
This was VERY helpful. Many thanks!
I love that aJax, plus when you add animated gifs. Way to get my blood flowing.
Very nice tutorial! Keep it up!
Another great tutorial. Thanks, Jeffrey!
Hey very nice Tut! It will be very helpfull for me
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!
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.
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
Noob question alert:
How would I go about reversing the order, whereby the newest loads on top?
I would like to know this aswell.
Just use prepend() instead of append(). :-)
Thanks! Had absolutely no trouble understanding you. explained everything so well.
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
learn a lot.
learn a lot too, really
Example on how to integrate it into WP would be nice !
But thanks for this tutorial
What is he using for the Lorem autocomplete.. thing ? Is it textexpander?