Social Networks

How can I submit form without refreshing page using jquery or Ajax?

Are you using JQuery to create interactive web applications?  If you looking for a really easy way to do ajax, you should look into jquery. Ajax is really tough if your’re programming in raw javascript. You’d don’t want to do that sort of thing.

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.

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.

Click below to download the script
download script

Below the code implementation guide:

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

Submit-Form-without-Refreshing-Page-with-Jquery

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");
?>
  1. You will have issue with this line, list($txt, $ext) = explode(“.”, $name);, is the file base name is with multiple dots(as in this-is-a-file.with-dot.png)

    so use this to get the file extension instead:
    $fileExt = substr(strrchr($fileName, ‘.’), 0);

Leave a Reply

Your email address will not be published. Required fields are marked *

Allowed Tags:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>