Submit PHP Form without Page Refresh Using JQuery, Ajax

In this tutorial, we will look into how to submit a PHP Form without Page Refresh Using JQuery, Ajax. For that, let us create a small form, that asks for First name and Last name and then displays the information in a formatted way in the page itself without refreshing the page.

Overview

We will be creating 2 PHP files and using a jQuery file for the tutorial. They are;

  • Index.php
  • Submit.php
  • jquery-1.11.3-jquery.min.js

Html/Php Form to accept user data (Index.php)

Save this file as “index.php”,
This contains Ajax And JQuery code to handle the user input as well as the HTML code which present the user with a form.

<!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>Tutorial – 02</title>
<script type=”text/javascript” src=”jquery-1.11.3-jquery.min.js”></script>
<script type=”text/javascript”>

$(document).on(‘submit’, ‘#reg-form’, function()
{
if(($(‘#first_name’).val()) == ”){
alert(‘Please fill the Fields.’);
$(‘#first_name’).focus()
return false;
}
if(($(‘#last_name’).val()) == ”){
alert(‘Please fill the Fields.’);
$(‘#last_name’).focus()
return false;
}

var data = $(this).serialize();
$.ajax({
type : ‘POST’,
url  : ‘submit.php’,
data : data,
success :  function(data)
{
$(“#reg-form”).fadeOut(500).hide(function()
{
$(“.result”).fadeIn(500).show(function()
{
$(“.result”).html(data);
});
});

}
});
return false;
});

</script>

</head>

<body>

<center>
<div>
<div id=”form” class=”result”>
<form method=”post” id=”reg-form”>
<table border=”0″>
<tr>
<td><input type=”text” name=”first_name” id=”first_name” placeholder=”First Name” /></td>
</tr>
<tr>
<td><input type=”text” name=”last_name” id=”last_name” placeholder=”Last Name” /></td>
</tr>
<tr>
<td align=”center”><button type=”submit”>Submit</button></td>
</tr>
</table>
</form>
</div>
</div>
</center>

</body>
</html>

After the form is filled and submitted it will first fire a method, which takes the data and validate it and then the data is serialised and passed to the “submit.php” to process the new form to display, then Ajax will hide the previous form and will display the form populated with Results.

Displaying the user data (Submit.php)

This file contains the code to capture the POST request(data from index.php), then creating the new table which uses by .result to display as the result.

 

<?php
if($_POST)
{
$firstname = $_POST[‘first_name’];
$lastname = $_POST[‘last_name’];
?>

    <html>
<table border=”0″>
<tr>
<td colspan=”2″>Ajax Call :: Successful</td>
</tr>
<tr>
<td><strong>First Name:</strong> </td>
<td><?php echo $firstname ?></td>
</tr>
<tr>
<td><strong>Last Name:</strong> </td>
<td><?php echo $lastname ?></td>
</tr>
</table>
</html>
<?php
}
?>

Jquery file to import (Jquery-1.11.3-jquery.min.js)

This Library file is used to enable JQuery. After including this in the same directory as the project files we use the following to import the library.

<script type=”text/javascript” src=”jquery-1.11.3-jquery.min.js”></script>

Remember to put all the files in the same folder.
That’s awesome!
You have created your own Php form with ajax and jQuery. Let me know your experience creating one for yourself or your project.

Don’t forget to share the post in your community with your friends. I really appreciate it.

 

Download the complete source code.

Grab the the free working demo Intantly!

You have Successfully Suscribed!

Leave a Reply

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