Submit Form without Refreshing Page with Jquery
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");
?>
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


58 comments:

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

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

    ReplyDelete
  3. 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)
    )

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

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. thank you very much.

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

    ReplyDelete
  8. hello friend...! m just checking.....!

    ReplyDelete
  9. 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 ;)

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

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

    ReplyDelete
  12. thanks. what a good tutorial. Great!!

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

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

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

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

    ReplyDelete
  17. nice article on jquery contact form! simply love it!

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

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

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

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

    Thanks
    Soumya Roy

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

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

    ReplyDelete
  24. 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?

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

    ReplyDelete
  26. Juste Fantastique !!! Merci ;)

    ReplyDelete
  27. 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,

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

    But you are ajax

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

    ReplyDelete
  30. wow this is wonderful

    ReplyDelete
  31. what a great tutorial this was!!

    ReplyDelete
  32. helpful.. thanks..

    ReplyDelete
  33. Great Tutorials. Keep up the good work!

    ReplyDelete
  34. its not working, its almost like its not there

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

    ReplyDelete
  36. thanks..............

    ReplyDelete
  37. Thanks, this worked perfectly!

    ReplyDelete

Make in India