Submit Form without Page Refresh using jQuery, Ajax, PHP

By | December 23, 2016

In this post we are going to check how to submit form without page refresh using jQuery ajax and php.¬†For this tutorial we are going to use simple script in jQuery which uses ajax() function to send form data to the next page using post() method. We will input user details and submit php form using ajax. And you will notice that URL of the page won’t change this is a very robust feature of jQuery Ajax.

form submit without page refresh

Live DEMO

Download Script

Check

Ajax Login system with PHP

Simple Login System with PHP

 

Submit Form without Page Refresh using jQuery, Ajax, PHP

Database


CREATE TABLE IF NOT EXISTS `details` (

`first_name` varchar(55) NOT NULL,
`last_name` varchar(55) NOT NULL,
`email` varchar(55) NOT NULL,
`contact` int(10) NOT NULL
) ;

db.php


<?php
$conn=mysql_connect('localhost','root','');
$db=mysql_select_db('pdo',$conn);
?>

submit_data.php

In this form we are collecting four input fields from the user and are submitting data to submit_process.php using ajax. It will then insert details in the database.

<!DOCTYPE html>
<html>
<head>
<title></title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>

#main{

position: absolute;
top:200px;
left:550px;
width: 220px;
padding: 10px;
border: 3px solid green;
margin: 1;

}

</style>

</head>
<body>

<nav class="navbar navbar-default">

<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">TechPlugg Dashboard</a>
</div>

<ul class="nav navbar-nav navbar-right">
</ul>

</div>

<!-- /.navbar-collapse -->
</div>

<!-- /.container-fluid -->
</nav>

<center>

<h1>Welcome to TechPlugg</h1>

We are a Tech Blog with Programming tutorials

</center>
<div class="ajax_response">

<form id="registration_form" align="center">
<div id ="main">
<input type="text" name="first_name" id="first_name" placeholder="Enter first Name" /><br/><br/><br/>
<input type="text" name="last_name" id="last_name" placeholder="Enter last Name"/><br/><br/><br/>
<input type="text" name="email" id="email" placeholder="Enter your Email" /><br/><br/><br/>
<input type="text" name="contact" id="contact" placeholder="Enter your contact number" /><br/><br/><br/>

<center><input type="submit" value="Submit" id="btn-register" name="btn-register" class="btn btn-primary"/></center>
</form></div>
</body>
</html>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
$('#btn-register').click(function(){
jQuery.ajax({
type: "POST",
url: "submit_process.php",
data: $("#registration_form").serialize(),
success: function(response) {

$('#registration_form').fadeOut('slow', function(){
$('#registration_form').fadeIn('slow').html(response);
});
}
});
return false;

});
});
</script>

submit_process.php

Submit process simply inserts data in the database and displays the input provided by user.

<?php
include_once 'db.php';


 $first_name = $_POST['first_name'];
 $last_name = $_POST['last_name'];
 $email = $_POST['email'];
 $contact = $_POST['contact'];

 
 $query = "INSERT INTO details(first_name,last_name,email,contact) VALUES('$first_name','$last_name','$email','$contact')";
 mysql_query($query);


 echo " <table class='table table-condensed' align='center' >";
 ?>

 
 <tr>
 <td>First Name</td>
 <td><?php echo $first_name ?></td>
 </tr>
 
 <tr>
 <td>Last Name</td>
 <td><?php echo $last_name ?></td>
 </tr>
 
 <tr>
 <td>Email</td>
 <td><?php echo $email; ?></td>
 </tr>
 
 <tr>
 <td>Contact No</td>
 <td><?php echo $contact; ?></td>
 </tr>
 <?php
 echo "</table>";

?>

Also check how to upload image file in PHP.

I hope you liked this post. Feel free to share it!