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!
ReplyDeleteNice Tutorials for beginner!!!
ReplyDeleteNice howto but be aware about cross scripting hack (XSS)before copy/paste.
ReplyDeleteWhy don't use the PDO and POO for the server script side.
Thank's for sharing it
Nicolas
thanks for tutorial.
ReplyDeletethanks
ReplyDeleteaJaxing just got even easier...thank you for this...
ReplyDeletethere is a error in
ReplyDeleteContacts
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)
)
thx
Deletethx men...bro....
DeleteThanks for your tutorials
ReplyDeletegracias
ReplyDeletegreat info
ReplyDeleteNice !
ReplyDeleteTy 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
ReplyDeleteThis comment has been removed by the author.
ReplyDeletethank you very much.
ReplyDeleteHi,
ReplyDeleteGood 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
ReplyDeletehello friend...! m just checking.....!
ReplyDeleteGreat Tutorial, Srinivas !
ReplyDeleteNice for beginner, maybe by using default function in jQuery such as $.post or $.get you have to write less code and include less script...
ReplyDeleteBut nice tutorial like ever ;)
how can do two formthis more than once on the same page
ReplyDeletenice work, thanks...
ReplyDeletehi.. great tutorial.. Would it be possible to show a loading image while the form is submitted? thank you in advance!
ReplyDeletecool
ReplyDeletethanks. what a good tutorial. Great!!
ReplyDeleteThanks!! i used it for compose message box (mixed with facebox), and its nice!!
ReplyDeletetnx 4 this code...it really help me...do u have a bidding code in php..its like bidding an item...tnx
ReplyDeleteHello! Thank you for lesson! How to make after thank you message return to the form?
ReplyDeleteHi there,
ReplyDeleteI 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!
ReplyDeleteThis 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
ReplyDeleteVery handy tutorial, I'm really happy with it. So thank you so much and I encourage you to do more :)
ReplyDeleteAwsome tutorial. Thnks.
ReplyDeleteI tried this on my webpage where multiple forms are getting loaded dynamically and there this is not working.
ReplyDeleteIt'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.
ReplyDeleteThanks
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.
ReplyDeleteAny help very appreciated.
Many thanks,
Jeff
Thanks!
ReplyDeleteThis 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?
ReplyDeletethanx
ReplyDeleteNice one, i've done one with validation for email, numbers only and letters only fields, you can check it on my blog.
ReplyDeleteThanks for sharing.
Juste Fantastique !!! Merci ;)
ReplyDeleteThank you very much for this tutorial, it is very helpful.
ReplyDeleteJust 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,
You said you will not use ajax (no need to post data string values via ajax.)
ReplyDeleteBut you are ajax
thanx it helps me a lot
ReplyDeleteThank you very much for this tutorial
ReplyDeletecan you plz tell up how to fetch that value from the database and data fetched display on same page..........
wow this is wonderful
ReplyDeletewhat a great tutorial this was!!
ReplyDeletehelpful.. thanks..
ReplyDeleteGreat Tutorials. Keep up the good work!
ReplyDeleteHey... it's a great tutorial
ReplyDeleteits not working, its almost like its not there
ReplyDeleteThanks...Its awesome... If possible provide file uploading using ajax jquery
ReplyDeletethanks..............
ReplyDeleteAwesome Thanks
ReplyDeleteThanks, this worked perfectly!
ReplyDeletethank u
ReplyDeletewhen i submit the form the page opens instead of thanku
ReplyDelete