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 fname, lname, & 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> </td>
<td><button type="button" name="btnSubmit" id="btnSubmit">Submit</button></td>
</tr>
</table>
<div id="status"></div>
</body>
</html>
<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>
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> </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>
<?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 />";
?>
