This post helps you to submit your form without refreshing page. In this tutorial I will show you how simple it is to do using jQuery form plugin just five lines of JavaScript code, no need to post data string values via ajax. Explained collaboration with validate plugin for implementing form field validations.
Download Script 
Live DemoJavaScript Code
$("#form").ajaxForm()- form is the ID name of the FORM tag. While submitting FORM ajaxForm() method posting data to submit.php without refreshing page. Result will show in #preview.
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
$('document').ready(function()
{
$('#form').ajaxForm( {
target: '#preview',
success: function() {
$('#formbox').slideUp('fast');
}
});
});
</script>
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
$('document').ready(function()
{
$('#form').ajaxForm( {
target: '#preview',
success: function() {
$('#formbox').slideUp('fast');
}
});
});
</script>
Contact.html
Simple HTML code. FORM contains three input fields name, email and message.
<div id="preview"> </div>
<div id="formbox">
<form id="form" action="submit.php" method="post">
Name
<input type="text" name="name" />
Email
<input type="text" name="email" />
Message
<textarea name="message"></textarea>
<input type="submit" value="Submit">
</form>
</div>
<div id="formbox">
<form id="form" action="submit.php" method="post">
Name
<input type="text" name="name" />
<input type="text" name="email" />
Message
<textarea name="message"></textarea>
<input type="submit" value="Submit">
</form>
</div>
Contacts
Table contains name, email, message and created data etc.
CREATE TABLE `contact` (
`id` int(11) AUTO_INCREMENT PRIMARY KEY,
`name` varchar(255) UNIQUE KEY,
`email` varchar(100),
`message` text UNIQUE KEY,
`created_date` int(11),
)
`id` int(11) AUTO_INCREMENT PRIMARY KEY,
`name` varchar(255) UNIQUE KEY,
`email` varchar(100),
`message` text UNIQUE KEY,
`created_date` int(11),
)
submit.php
Contails simple PHP code. Inserting values into contacts table.
<?php
include("db.php");
if($_SERVER["REQUEST_METHOD"] == "POST")
{
$name=mysql_real_escape_string($_POST['name']);
$email=mysql_real_escape_string($_POST['email']);
$message=mysql_real_escape_string($_POST['message']);
if(strlen($name)>0 && strlen($email)>0 && strlen($message)>0)
{
$time=time();
mysql_query("INSERT INTO contact (name,email,message,created_date) VALUES('$name','$email','$message','$time')");
echo "<h2>Thank You !</h2>";
}
}
?>
include("db.php");
if($_SERVER["REQUEST_METHOD"] == "POST")
{
$name=mysql_real_escape_string($_POST['name']);
$email=mysql_real_escape_string($_POST['email']);
$message=mysql_real_escape_string($_POST['message']);
if(strlen($name)>0 && strlen($email)>0 && strlen($message)>0)
{
$time=time();
mysql_query("INSERT INTO contact (name,email,message,created_date) VALUES('$name','$email','$message','$time')");
echo "<h2>Thank You !</h2>";
}
}
?>
Validate Plugin
Here the collaboration of jQuery validate and form plug-in. <script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$('document').ready(function()
{
$('#form').validate(
{
rules:
{
"name":{
required:true,
maxlength:40
},
"email":{
required:true,
email:true,
maxlength:100
},
"message":{
required:true
}},
messages:
{
"name":{
required:"This field is required"
},
"email":{
required:"This field is required",
email:"Please enter a valid email address"
},
"message":{
required:"This field is required"
}},
submitHandler: function(form){
$(form).ajaxSubmit({
target: '#preview',
success: function() {
$('#formbox').slideUp('fast');
}
});
}
})
});
</script>
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$('document').ready(function()
{
$('#form').validate(
{
rules:
{
"name":{
required:true,
maxlength:40
},
"email":{
required:true,
email:true,
maxlength:100
},
"message":{
required:true
}},
messages:
{
"name":{
required:"This field is required"
},
"email":{
required:"This field is required",
email:"Please enter a valid email address"
},
"message":{
required:"This field is required"
}},
submitHandler: function(form){
$(form).ajaxSubmit({
target: '#preview',
success: function() {
$('#formbox').slideUp('fast');
}
});
}
})
});
</script>
db.php
PHP database configuration file
<?php
$mysql_hostname = "Host name";
$mysql_user = "UserName";
$mysql_password = "Password";
$mysql_database = "Database Name";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
mysql_select_db($mysql_database, $bd) or die("Could not select database");
?>
$mysql_hostname = "Host name";
$mysql_user = "UserName";
$mysql_password = "Password";
$mysql_database = "Database Name";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
mysql_select_db($mysql_database, $bd) or die("Could not select database");
?>
awesome tuts! thank u!
Nice Tutorials for beginner!!!
Nice howto but be aware about cross scripting hack (XSS)before copy/paste.
Why don't use the PDO and POO for the server script side.
Thank's for sharing it
Nicolas
thanks for tutorial.
thanks
aJaxing just got even easier...thank you for this...
there is a error in
Contacts
Table contains name, email, message and created data etc.
CREATE TABLE `contact` (
`id` int(11) AUTO_INCREMENT PRIMARY KEY,
`name` varchar(255) UNIQUE KEY,
`email` varchar(100),
`message` text UNIQUE KEY,
`created_date` int(11),
)
Copy this Table contains name, email, message and created data etc.
CREATE TABLE `contact` (
`id` int(11) AUTO_INCREMENT PRIMARY KEY,
`name` varchar(255) UNIQUE KEY,
`email` varchar(100),
`message` text,
`created_date` int(11)
)
Thanks for your tutorials
gracias
great info
Nice !
Ty for ur tuto !
Hi! Nice tutorial. Can someone help me integrate this with this Jquery notification: http://www.red-team-design.com/cool-notification-messages-with-css3-jquery
thank you very much.
Hi,
Good Job
Can u please tell me how to use Google Analytics and how can i fetch Google Analytics result in our site using GAPI Classes Step by step.
Thanks
Nice! Thanks
hello friend...! m just checking.....!
Great Tutorial, Srinivas !
Nice for beginner, maybe by using default function in jQuery such as $.post or $.get you have to write less code and include less script...
But nice tutorial like ever ;)
how can do two formthis more than once on the same page
nice work, thanks...
hi.. great tutorial.. Would it be possible to show a loading image while the form is submitted? thank you in advance!
cool
thanks. what a good tutorial. Great!!
Thanks!! i used it for compose message box (mixed with facebox), and its nice!!
tnx 4 this code...it really help me...do u have a bidding code in php..its like bidding an item...tnx
Hello! Thank you for lesson! How to make after thank you message return to the form?
Hi there,
I have followed the tutorial and I am getting no errors but the info is not going into the database.
Any ideas?
http://sustaink.ca/contact.html
nice article on jquery contact form! simply love it!
This is awesome and working perfectly until I change the names of input fields such as "name", "email" .. can you please help me out where should I change the name..thanks in advance
nice
Very handy tutorial, I'm really happy with it. So thank you so much and I encourage you to do more :)
Awsome tutorial. Thnks.
I tried this on my webpage where multiple forms are getting loaded dynamically and there this is not working.
It's working with a single form with the same input fields name.
can you please give us some clues so that we can make this form submission work in multiple dynamic forms in a single page.
Thanks in advance.
Soumya Roy
I need it badly so if you can help me that will be very much helpful for me.
Thanks
Soumya Roy
Hi, thanks for this tutorial. Any idea why it doesn't validate in IE? When Submitting with empty fields there is no error and the "Thank you message" shows up but I don't receive the email.
Any help very appreciated.
Many thanks,
Jeff
Thanks!
This works great except when I place my form and preview div inside the javascript funciton:
document.getElementById('test').innerHTML=(' ')
Can you someone PLEASEEE tell me why this is happening, and even better, how I can fix it. Much appreciated
Internet explorer will not provide a validation error. Instead, the box disappears as it would before the success message, but with no content instead. Any idea why this is happening?
thanx
Nice one, i've done one with validation for email, numbers only and letters only fields, you can check it on my blog.
Thanks for sharing.
Juste Fantastique !!! Merci ;)
Thank you very much for this tutorial, it is very helpful.
Just a question, is it possible to have button to get back to Contact.html original content?
I use this on my button (onclick="history.back(-1)") but it goes back to the page I visited before the contact.html.
Please advise
Many Thanks,
this is great
You said you will not use ajax (no need to post data string values via ajax.)
But you are ajax
thanx it helps me a lot
great
Thank you very much for this tutorial
can you plz tell up how to fetch that value from the database and data fetched display on same page..........
wow this is wonderful
what a great tutorial this was!!
helpful.. thanks..
Great Tutorials. Keep up the good work!