Submit form using jquery .post

June 11, 2012 // In: jQuery, PHP, Web Design

Today, I’ll teach you, how to submit form using jquery post method, 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 fnamelname, & email. and a Submit button.
Now Place a div at the bottom and set its id to status.

Code:

 

Submit Form Using jquery post by Sharp Coders

<!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 post 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(){
$.post('form2.php',
{
fname: $('#fname').val(),
lname: $('#lname').val(),
email: $('#email').val()
},
function(data){
$('#status').html(data);
});
});
});
</script>

This code will be used to submit form through jquery.post method.

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 by Sharp Coders</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btnSubmit').click(function(){
$.post('form2.php',
{
fname: $('#fname').val(),
lname: $('#lname').val(),
email: $('#email').val()
},
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.
How To Force File Download With PHP
Submit form using ajax without refreshing page