Insert data in mysql with help of php, jquery & ajax

There are number of people who are searching that how to insert data in database with help of Php, Jquery and Ajax.If you are also searching this then here is your answer.Here i have shared some knowledge about this.I have also created a example file with this tutorial which you can download.

Note !   If you doesn't find the file then feel free to email us, We will provide you soon.

1. Create Database where you will store the information.
2. Create HTML form where user will enter data. 
3. Create your js script for data insertoin via jquery & ajax.

I am using bootstrap classes and jquery-1.11.2 version for my ease.You can change this as per your convenience.I will explain you step by step.

Create your index.php file in which you make form like below:

After that create the most important custom.js file where you will get all form date and send them to php file with the help of ajax.In this file the following code will be added.

$(document).ready(function(){
 // When click on submit button
 $("#_submit").click(function(){
  // Get the all the form values
  // I am getting here single-single value from input with the help of input's ID
  $_name=$("#_name").val();
  $_username=$("#_username").val();
  $_email=$("#_email").val();
  $_pass=$("#_pass").val();
  $_conpass=$("#_conpass").val();
  // First i will check in my console window that value is coming or not, You can use developer tool in firefox and chrome.
  // Here i will check that password is match or not
  if($_pass=='' || $_pass!=$_conpass){
   $(".loading").text('Password empty or doesn\'t match');
   return false;
  }else{
   // Here i have used $.ajax method you can also use $.post, $.json or $.get method
   $.ajax({
    url:ajaxUrl,
    type:'post',
    dataType:'json',
    data:{'action':'add_user','_name':$_name,'_username':$_username,'_email':$_email,'_pass':$_pass},
    beforeSend:function(){ //this callback function is used before send request to server. 
     $(".loading").text('Loading...');
    },
    success:function(response){
     if(response.bool==true){
      $(".loading").text('Your data has been successfully added').fadeOut(3000);
      // Clear the value of form
      $_name=$("#_name").val('');
      $_username=$("#_username").val('');
      $_email=$("#_email").val('');
      $_pass=$("#_pass").val('');
      $_conpass=$("#_conpass").val('');
     }else{
      $(".loading").text(response.errorMsg);
     }
    },
    error:function(error){
     $(".loading").text(error);
    },
   });
  }
  console.log($_name); //this is just for testing purpose.
 });
});

Note! please include higher version of jquery because i have used $ sign instead of var for declaring variable.

Note! Another important the ajax url is defined in "index.php" file, the first file of this tutorial.


Now create another important file which is "ajax.php" for sending data in mysql database.

// Database Configuration
 mysql_connect("localhost","root","") or die (mysql_error());
 mysql_select_db("jquery-ajax") or die (mysql_error());

 if(isset($_POST['action'])){
  $action=$_POST['action'];
  $action(); //With this technique we can run our function.
 }

 // Create function add user in database.
 function add_user(){
  $res=new stdClass(); // In php stdClass is standard class for creating object.
  $_name=$_POST['_name'];
  $_username=$_POST['_username'];
  $_email=$_POST['_email'];
  $_pass=$_POST['_pass'];
  // Insert into database
  $insertQuery=mysql_query("INSERT INTO users (name,username,email,pass) VALUES ('$_name','$_username','$_email','$_pass')");
  if($insertQuery){
   $res->bool=true;
  }else{
   $res->msg=mysql_error();
  }
  echo json_encode($res);
  // json_encode function is used for converting objects in json becuase in our custom.js dataType is json.
 }

I hope you enjoy this tutorial.

Categories: ajax, How to insert data with help of jquery-ajax, Insert data via ajax and php, jquery, mysql, php