Site Loader
Get a Quote

Php script to insert records in MySQL using Jquery and Ajax


Insert records in MySQL using Jquery and Ajax: Hi readers today we come up with the topic of Ajax(Asynchronous Javascript and XML). Here in this tutorial, we have provided the short description about AJAX and then the detail with full source code of Php script to insert records in MYSQL using Jquery and Ajax.

AJAX is a short form of Asynchronous Javascript And XML(Extended Markup Language) . Here Asynchronous simply means that at the time of browser request the user is not blocked and can perform another operation also.

So Ajax generally used to create an Asynchronous web application on client side i.e, send or receive data from server without page reload or Refresh

Here is the step-by-step guide to inserting records in Mysql using Jquery and Ajax.

 

Step1: First, Create a Database and table directly from the PHPMyAdmin 

open localhost/phpmyadmin and open sql tab and run the below sql query command

Create Database session;

create table register(
id int(5) NOT NULL  AUTO_INCREMENT PRIMARY KEY,
name varchar(30),
username varchar(30) NOT NULL,
password varchar(10) NOT NULL,
email varchar(30) NOT NULL,
status int(11),
last_login DATETIME NOT NULL
);


Step 2: After table creation create a Registration Form using PHP script

Here we have created the registration form with only “id” whereas the attributes like action and method is given through AJAX. Including the created js file under <head> tag.

registration.php
<!Doctype html>
<html>
<head><title>Registration Form</title>
<style>
.margin
{
 margin-top:15px;
}
</style>

//including jquery script
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/postformvalidation.js"></script>
</head>
<body>
<!--Create a Registration form with id -->
<form id="registrationForm">
<div class="margin">
Enter Name:
<input type="text" id="name" name="name" />
</div>
<div class="margin">
Enter Username:
<input type="text" id="username" name="username"/>
</div>
<div class="margin">
Enter Password:
<input type="password" id="password" name="password"/>
</div>
<div class="margin">
Enter E-mail Id:
<input type="email" id="email" name="email" />
</div>
<div class="margin">
<input type="submit" id="Register" name="Register" value="submit"/>
</div>

//creating a div element to display the result
<div id="result"></div>
<div id="show"></div>
</form>
<!--end of form-->

</body>
</html>

 


Step 3: create a .js file to insert records using Jquery and Ajax code

Here we have created the JavaScript file named “postformvalidation.js”. First, use the $(document).ready function to make the DOM element to be fully loaded and then use a click() function to create an event on form i.e when the submit button of form is clicked by user then it checks all the validation and required field afterwards all the data is passed through Ajax by using the ajax() jquery function 

//ajax function is called
$.ajax(
{
type:"POST",                       //method type of form
url:"register.php",                //action attribute of form
data:formData,                     //data is stored
success:function(result){           //success is used to display result
$("#result").html(result);
}
});
postformvalidation.js
jQuery(document).ready(function($){

//when registration form submit button is clicked
 $("#registrationForm #Register").click(function(){

//required field:----

//name
 var name=$("input#name").val();
 if(name==""){
 $("#error").fadeIn().text("Name Required");
 $("input#name").focus();
 return false;
 }
 //username
 var username=$("input#username").val();
 if(username==""){
 $("#error").fadeIn().text("User name is Required");
 $("input#username").focus();
 return false;
 }

 //password
 var password=$("input#password").val();
 if(password==""){
 $("#error").fadeIn().text("password Required");
 $("input#password").focus();
 return false;
 }
 //email
 var email=$("input#email").val();
 if(email==""){
 $("#error").fadeIn().text("Email id is Required");
 $("input#email").focus();
 return false;
 }
 //temporary variable to store data from form
 var formData='name='+ name+ '&username=' + username+ '&password=' + password +'&email='+email;
 if(name==''||username==''|| password==''||email=='')
 {
 alert("Please Fill All Fields");
 }
 else
 {
 //ajax function is called
 $.ajax(
  {
  type:"POST",
  url:"register.php",
  data:formData,
  success:function(result){
  $("#result").html(result);
  }
  });
 }
 return false;
 });

});

Step 4: create a PHP file to write script of insert into and select command in MYSQLi

First, create a PHP file named register .php and copy the below code and then save it. Here in this Php file, we have created the connection with MYSQLi and then run the Insert into command using a php script to insert records successfully using MySQL procedural function then fetch the result using a SELECT * command.This Page will insert records in MYSQL using Jquery and Ajax.

register.php
<?php
//create a connection with database session 
$conn = mysqli_connect("localhost","root","","session");
//check the connection
if (mysqli_connect_errno())
{
echo 'MySQLi Connection was not established: ' . mysqli_connect_error();
}

//insert records in register table in session database
$create="insert into register(name,username,password,email,status,last_login) 
 VALUES('".$name."','".$username."','".$user_password."','".$email."','0',now())";
 
//run the above query using mysqli_query() function
$result=mysqli_query($conn,$create);
if(!$result)
{
 die("error in inserting records:".mysqli_error());
}
else
 echo "Records successfully inserted into table";
//display records 
$sql="select * from register";

$display=mysqli_query($conn,$sql);
if(mysqli_num_rows($display)>0)
{
 //display records in table
 echo "<table><tr><th>ID</th><th>Name</th><th>Username</th><th>Password</th>
 <th>email</th><th>Status</th><th>Last_Login</th><th>Delete Records</th></tr>";
 

//
 while($rows=mysqli_fetch_assoc($display))
 {

//display each records 
 echo "<tr><td>".$rows["id"]."</td><td>".$rows["name"]."</td><td>".$rows["username"]."</td><td>".$rows["password"]."</td><td>".
 $rows["email"]."</td><td>".$rows["status"]."</td><td>".$rows["last_login"]."</td></tr>";
 }
 echo "</table>";
}

//close the connection
mysqli_close($conn);

?>


<!--php code ends-->


Snapshot view:

insert records in MYSQL using Jquery and Ajax
insert records in MYSQL using Jquery and Ajax

I hope you would like this tutorial to insert records in mysql using Jquery and ajax!

Post Author: TechieFlair

Leave a Reply

Your email address will not be published.