Submit form using ajax without refreshing page

June 08, 2012 // In: jQuery, PHP, Web Design
Today, I’ll teach you, how to submit form using ajax, without refreshing page. Its very simple and easy way.
You just need to download latest jQuery. I’ve give you a very simple example so that everyone can understand it easily.

we just need to add jquery file into your page. We can submit the form without refreshing page.
To understand it completely just follow the steps.
Step-1:
Create a file form.html and insert some input fields. For this tutorials, Insert three text fields (First Name, Last Name, Email) and set their ids and names to fname, lname, & email. and a Submit button.
Now Place a div at the bottom and set its id to status.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Submit Form Using ajax by Sharp Coders</title>
</head>
<body>
<table width="500" border="0" cellspacing="0" cellpadding="2">
<tr>
<td>First Name</td>
<td><input type="text" name="fname" id="fname" /></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="lname" id="lname" /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><button type="button" name="btnSubmit" id="btnSubmit">Submit</button></td>
</tr>
</table>
<div id="status">

</div>
</body>
</html>

Step-2
Now download jquery file  and place this file in the project folder, and add this file to our page.
to do this place this code in the head section of the form.html page.
Code:

<script src="jquery.min.js" type="text/javascript"></script>

Now, we can use jquery in our page.
Now add the following code in the head section
code:

<script type="text/javascript">
$(document).ready(function(){
$('#btnSubmit').click(function(){
$.ajax({
type: "POST",
url: 'form2.php',
data: "fname=" + $('#fname').val() + "&lname=" + $('#lname').val() + "&email=" + $('#email').val(),
success: function(data){
$('#status').html(data);
}
});
});
});
</script>

This code will be used to submit form through ajax.Final Code of form.html page 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Submit Form Using jQuery/ajax by Sharp Coders</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btnSubmit').click(function(){
$.ajax({
type: "POST",
url: 'form2.php',
data: "fname=" + $('#fname').val() + "&lname=" + $('#lname').val() + "&email=" + $('#email').val(),
success: function(data){
$('#status').html(data);
}
});
});
});
</script>
</head>
<body>
<table width="500" border="0" cellspacing="0" cellpadding="2">
<tr>
<td>First Name</td>
<td><input type="text" name="fname" id="fname" /></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="lname" id="lname" /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><button type="button" name="btnSubmit" id="btnSubmit">Submit</button></td>
</tr>
</table>
<br />
<a href="http://www.sharp-coders.com">http://sharp-coders.blogspot.com</a>
<br />
<div id="status">

</div>
</body>
</html>

Step-3
Create an Empty php file with the name form2.php and place following code in the file.

<?php
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$email = $_POST['email'];
echo "You Entered <br />";
echo "<b>First Name:</b> ". $fname . "<br />";
echo "<b>Last Name:</b> ". $lname . "<br />";
echo "<b>Email:</b> ". $email . "<br />";
?>
When we’ll submit the form, the form values will be posted to this (form2.php) page. You can perform different operation on the receiving data.
We’ve just printed the receiving data.
Submit form using jquery .post
Upload, Resize and Save Image in jpg using PHP
  • Best one….

  • Sunil Patel

    great job. I have one question if you don’t mind.

    I want to pass value on same page on form.html

    I had changed the form.html name to form.php and tried to pass value on same page but not working.


    <?php
    $fname = $_POST['fname'];
    $lname = $_POST['lname'];
    $email = $_POST['email'];
    echo "You Entered <br />";
    echo "<b>First Name:</b> ". $fname . "<br />";
    echo "<b>Last Name:</b> ". $lname . "<br />";
    echo "<b>Email:</b> ". $email . "<br />";
    ?>

    Can you please help?
    Thanks for useful blog.