CODEWITHSUNDEEP
phpjqueryajaxmysqli
Sume-mase
Sume-mase

Reputation: 119

Why does not insert these values in database using Ajax

I used tutorialspoint to guide me to insert the values from input text into the db, but unfortunately, it will not insert to the database. Is this correct implementation for AJAX?

Here's my index.php

<html>
<body>

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
   var ajaxRequest;  // The variable that makes Ajax possible!
   try{

      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   }catch (e){

      // Internet Explorer Browsers
      try{
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e) {

         try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         }catch (e){

            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }

   // Create a function that will receive data
   // sent from the server and will update
   // div section in the same page.
   ajaxRequest.onreadystatechange = function(){

      if(ajaxRequest.readyState == 4){
         var ajaxDisplay = document.getElementById('ajaxDiv');
         ajaxDisplay.innerHTML = ajaxRequest.responseText;
      }
   }


   // Now get the value from user and pass it to
   // server script.
   var fname = document.getElementById('fname').value;
   var lname = document.getElementById('lname').value;
   var gen = document.getElementById('gen').value;
  // var queryString = "?age=" + age ;

    queryString +=  "&fname=" + fname + "&lname=" + lname+ "&gen=" + gen;
   ajaxRequest.open("GET", "ajax.php" + queryString, true);
   ajaxRequest.send(null); 
}
//-->
</script>

<form name='myForm'>

   First Name: <input type='text' id='fname' /> <br />
   Last Name: <input type='text' id='lname' /> <br />
   Sex: 
   <select id='gen'>
      <option value="m">m</option>
      <option value="f">f</option>
   </select>
   <input type='button' onclick='ajaxFunction()' value='Query MySQL'/>

</form>
<div id='ajaxDiv'>Your result will display here</div>
</body>
</html>

ajax.php

<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "my_db";


$con =  new mysqli($dbhost, $dbuser, $dbpass,$dbname);


$query="INSERT INTO table1 (fname, lname, gender)
VALUES
('$_GET[fname]','$_GET[lname]','$_GET[gen]')";

$qry_result = $con->query($query);


?>

Upvotes: 0

Views: 316

Answers (3)

jon_spades
jon_spades

Reputation: 31

Try this in ajax.php:

$fname=$_GET['fname'];
$lname=$_GET['lname'];
$gen=$_GET['gen'];

$query="INSERT INTO table1 ('fname', 'lname', 'gender')
        VALUES('$fname','$lname','$gen')";

Upvotes: 1

Vishal Wadhawan
Vishal Wadhawan

Reputation: 1085

change your code to the bellow 

var queryString;

queryString =  "fname=" + fname + "&lname=" + lname+ "&gen=" + gen;

ajaxRequest.open("GET", "ajax.php?" + queryString, true);

and make sure ajax.php is in the same folder as index.php

Upvotes: 1

Arun
Arun

Reputation: 760

Declare Form method="POST"

and 

$query="INSERT INTO table1 (fname, lname, gender) VALUES
('".$_POST['fname']."','".$_POST['lname']."','".$_POST['gen']."')";

Upvotes: 0

Related Questions