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> </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(){
$.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> </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 />";
?>
