AJAX (Asynchronous JavaScript and XML) is used for update a web page without reloading the page. AJAX mostly used to send and receive data from database without reload web page.
In this artcle we will see how to submit a form data into database using AJAX, PHP and jQuery without refresh page.
So let’s checkout all steps one by one with easy way.
In step one we’ll create a MySQL database with name ‘db_form’, after that need to create a table in database with name ‘form_data’ with column name id, firstname, lastname, email and phone. If you are familiar with PHPmyAdmin then you can do this manually, otherwise you can do this by PHP code with below code
CREATE DATABASE db_form; CREATE TABLE form_data( id int(10) NOT NULL AUTO_INCREMENT, firstname varchar(255) NOT NULL, lastname varchar(255) NOT NULL, email varchar(255) NOT NULL, phone varchar(255) NOT NULL, PRIMARY KEY (id) )
Next, we’ll create a simple HTML form template with name like simpleform.html In this template we’ll add below HTML code:
<!DOCTYPE html> <html> <head> <title>Submit Form Data into database Using Ajax, PHP and jQuery</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <link href="css/style.css" rel="stylesheet"> <script src="js/customjs.js"></script> </head> <body> <div id="form_sec"> <h2>Submit Form Data into database Using Ajax, PHP and jQuery</h2> <!-- Required div Starts Here --> <div id="form_body"> <h3>Fill Basic Information</h3> <div> <label>First Name :</label> <input id="fname" type="text"> <label>Last Name :</label> <input id="lname" type="text"> <label>Email :</label> <input id="email" type="text"> <label>Phone No :</label> <input id="phone" type="text"> <input id="submit" type="button" value="Submit"> </div> </div> </div> </body> </html>
Now we have to create a PHP template for get form data and insert into database table with MySQL insert query. Let’s create a PHP template with name formsubmit.php and add below code in this template.
<?php
$connection = mysqli_connect("localhost", "root", "", "db_form"); // create datbase connection
//$db = mysqli_select_db("db_form", $connection); // Selecting Database
//Fetching Values from URL
$fname=$_POST['fname'];
$lname=$_POST['lname'];
$email=$_POST['email'];
$phone=$_POST['phone'];
//Insert query
$query = mysqli_query($connection, "insert into form_data(firstname, lastname, email, phone) values ('$fname', '$lname', '$email','$phone')");
echo "Form Submitted Succesfully";
mysqli_close($connection); // Connection Closed
?>In this code you’ll see, first we have make databse connection and then insert data into database table.
You have to make change in mysqli_connect syntex as per your PHP version.
In this step we’ll create a JS file for add jQuery and AJAX code for get form data and then send to formsubmit.php using AJAX. For this we’ll use this code.
$(document).ready(function(){
$("#submit").click(function(){
//Get all fields value using jQury
var fname = $("#fname").val();
var lname = $("#lname").val();
var email = $("#email").val();
var phone = $("#phone").val();
//create a datastring
var dataString = 'fname='+ fname + '&lname='+ lname + '&email='+ email + '&phone='+ phone;
// validation for enter all fields in HTML form
if(fname==''||lname==''||email==''||phone=='')
{
alert("Please Fill All Fields");
}
else
{
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "formsubmit.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
}
});
}
return false;
});
});Now in last step, we’ll create a stylesheet for design our HTML form. Let’s create a file with name style.css and some CSS in this file for make our form look better
#form_body {
background-color:#fff;
color:#000000;
box-shadow:0 1px 1px 1px #067DFE;
font-weight:400;
width:500px;
margin:0 auto;
height:500px
}
#form_body div {
padding:10px 0 0 30px
}
h3 {
margin-top:0;
color:#fff;
background-color:#067DFE;
text-align:center;
width:100%;
height:50px;
padding-top:30px
}
#form_sec {
width:960px;
margin:50px auto;
padding-top:20px;
font-family:sans-serif;
text-align: center;
}
label {
margin-top: 15px;
display: block;
float:left;
}
input {
width:90%;
height:30px;
margin-top:10px;
border-radius:3px;
padding:2px;
border:1px solid #ddd;
display: block;
}
input[type=button] {
background-color:#067DFE;
border:1px solid #fff;
font-family:sans-serif;
font-weight:700;
font-size:18px;
color:#fff;
height: 45px;
}So these are the simple steps for submit a form data into a database table without refresh web page. I hope you like the article, if so then please subscribe for new articles notification.
You can also download full code from here
