9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Monday, September 12, 2011

Submit Form without Refreshing Page with Jquery

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.

Submit Form without Refreshing Page with Jquery

Download Script     Live Demo

JavaScript 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>

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>

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),
)


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>";
}
}
?>

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>

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");
?>
Comments
{ 55 comments }
fsharing said...

awesome tuts! thank u!

Sanchit said...

Nice Tutorials for beginner!!!

Nicolas BONNICI said...

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

bulmaca said...

thanks for tutorial.

agastya said...

thanks

Freddie Lore said...

aJaxing just got even easier...thank you for this...

Naveen Sridhara said...

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)
)

Naveen Sridhara said...

Thanks for your tutorials

Anonymous said...

gracias

webtutor said...

great info

testinou32 said...

Nice !
Ty for ur tuto !

jay said...

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

jay said...
This comment has been removed by the author.
Anonymous said...

thank you very much.

Anonymous said...

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

Nguyễn Quốc Tuấn said...

Nice! Thanks

Gaurav Chaubey said...

hello friend...! m just checking.....!

Ивайло Радев said...

Great Tutorial, Srinivas !

Cristian Sannino said...

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 ;)

Anonymous said...

how can do two formthis more than once on the same page

Joe said...

nice work, thanks...

Hjelmdal said...

hi.. great tutorial.. Would it be possible to show a loading image while the form is submitted? thank you in advance!

Anonymous said...

cool

Anonymous said...

thanks. what a good tutorial. Great!!

Dzikri Aditya Darmawan said...

Thanks!! i used it for compose message box (mixed with facebox), and its nice!!

Anonymous said...

tnx 4 this code...it really help me...do u have a bidding code in php..its like bidding an item...tnx

Karat said...

Hello! Thank you for lesson! How to make after thank you message return to the form?

Anonymous said...

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

cool said...

nice article on jquery contact form! simply love it!

RaviTeja said...

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

she said...

nice

Anonymous said...

Very handy tutorial, I'm really happy with it. So thank you so much and I encourage you to do more :)

Skipper said...

Awsome tutorial. Thnks.

Anonymous said...

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

Anonymous said...

I need it badly so if you can help me that will be very much helpful for me.

Thanks
Soumya Roy

Anonymous said...

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

Anonymous said...

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

Anonymous said...

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?

Anonymous said...

thanx

darksier1 said...

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.

OMT said...

Juste Fantastique !!! Merci ;)

JaenorP said...

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,

John Wanyoike said...

this is great

mahesh said...

You said you will not use ajax (no need to post data string values via ajax.)

But you are ajax

JASMINE JAIZ said...

thanx it helps me a lot

JASMINE JAIZ said...

great

JASMINE JAIZ said...

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..........

Anonymous said...

wow this is wonderful

gpalve said...

what a great tutorial this was!!

Anonymous said...

helpful.. thanks..

chris allen said...

Great Tutorials. Keep up the good work!

Jadav Krunal said...

Hey... it's a great tutorial

Daniel Garibah said...

its not working, its almost like its not there

Nikhil Hokam said...

Thanks...Its awesome... If possible provide file uploading using ajax jquery

Anonymous said...

thanks..............

Post a Comment