How to Insert values in database using javascript & ajax in php.

Inserting data into database using Ajax is very simple just you have to do some efforts for execution of this code. First of all make one page in which you are going to run you form. In this example we are inserting a circle value into database using Ajax and JavaScript.

Step 1:-
1). Make one input field and one input button for inserting value.

Circle Name
     
         
     

Step 2:-
Make function of Ajax in script tag before closing </head> section for inserting value in database. function will remain on the same page. In this function we are getting circle value from the input ID "circle_name" in the form field. then it will process and redirect this value to another page where our PHP code is written.
after inserting the value in database we will get response 'xx' in (res) variable now with this we are showing alert using response.

Insert Account Name into Database

function insert_data()
{ 
 var circle_name = document.getElementById('circle_name').value;
 if (circle_name==null || circle_name=="")
    {
      alert("Please Fill Circle Field");
      return false;
    }
 if (window.XMLHttpRequest) 
    {
     xmlhttp = new XMLHttpRequest();
    }
    else 
    {
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function()
    {   
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
     {
      var res = xmlhttp.responseText;
      alert(res);
    
      if (res == "xx" || res == "XX" )
      {
        alert("One Circle Added!!!");
        window.location.reload();
      }
   } 
    }
    var string = "insert_data.php?submit_circle="+circle_name;
    xmlhttp.open("GET", string, false);
    xmlhttp.send();
}

Step 3:- Build one page - insert_data.php on which we will get variable value. make sure that your database is connected with server like :- WAMP, XAMP etc. 

After executing the query we get response "xx" this means that we have successfully inserted one record in database And with the help of 'xx' response we can show alert or any king of message of inserting data into database.

Still if you face any Problem then contact me from the footer area contact form. I will surely reply you.