Post values to database using MySQL, PHP, AJAX without using jQuery

Question

Here is the page which generates the product display:

<?php
$q = intval($_GET['q']);

$databaseConnect = $_SERVER['DOCUMENT_ROOT'] . "/637415/globalScripts/sql_connect.php";
include($databaseConnect);

mysqli_select_db($con,"up637415_cms");
$sql="SELECT * FROM products WHERE prod_id = '".$q."'"; 

$result = mysqli_query($con,$sql);

while($row = mysqli_fetch_array($result))
  {
  echo 
 '<div class="prodWrapper">'
 . '<h2>' . '<span id="currentProdId">' . $row['prod_id'] . '</span>' . ' '  .    $row['prod_title'] . '</h2>' . '<form><input type="text" placeholder="Enter New Title" id="newProdTitle"/><input type="button" value="Commit" onclick="productTitleUpdate()"/></form> '
  . '<div class="prodimg">' . 
        '<img src="/637415/cms/images/products/' . $row['prod_img'] . '"'     . ' ' . 'alt="' 
            . $row['prod_title'] . ' ' . 'image' . '">' 
        . '<form class="clearit"><input type="file" value="Select Image" /><input type="submit" value="Upload & change image" /></form> '
  . '</div>' 
 . '<h3>' . 'Product Description:' .  '</h3>' .$row['prod_description'] . 
'<form class="clearit"><textarea class="clearit" rows="4" cols="50"  placeholder="Update product description"></textarea><input type="submit" value="Commit" /></form> '
  . '<p>' . 'Quantity Available:' . $row['prod_quantity'] . '</p>' . '<form><input type="text" placeholder="Enter Quantity" /><input type="submit" value="Commit" /></form> '    .
  '</div>'
  ;
  }

mysqli_close($con);
?> 

Here is the Javascript file which I'm trying to use to post values from the span id="currentProdId" and the input id of "newProdTitle" to a MySQL database using PHP:

function  productTitleUpdate()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
 document.getElementById("newProdTitle").innerHTML=xmlhttp.responseText;
 }
}
xmlhttp.open("POST","/637415/admin/scripts/updateProductTitle.php",true);
xmlhttp.send(newProdTitle=document.getElementById("newProdTitle").value);
xmlhttp.send(newProdTitle=document.getElementById("currentProdId").value);
}

Here is the PHP file the ajax uses:

<?php
$databaseConnect = $_SERVER['DOCUMENT_ROOT'] . "/637415/globalScripts/sql_connect.php";
    include($databaseConnect);
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
mysqli_select_db($con,"up637415_cms");
$sql="UPDATE products
SET prod_title='(newProdTitle from javascript file) WHERE prod_id=(currentProdId from javascript file)";

if (!mysql_query($sql,$con))
  {
  die('Error: ' . mysql_error());
  }
echo '1 record added' . ' ' . '<a href="/637415/admin/index.php">Go back to admin</a>';

mysql_close($con)
?> 

I am not sure how to get the value from the javascript file:

SET prod_title='(newProdTitle from javascript file) WHERE prod_id=(currentProdId from javascript file)";

then replace the values stored in the database. It should also refresh to the new value without refreshing the page. I have been scanning over the internet on how to do this but feeling a bit lost.

Any help will be appreciated. Thanks.

Answer 1

Ok, so you are using the POST method in your AJAX request, so to pass JavaScript values to PHP, and subsequently MySQL, you need to send the variable values to your PHP script which it looks like you are doing.

Typically, you have to serialize the data you are trying to send, like so:

var data = 'newProdTitle='+newProdTitle+'&currentProdId='+currentProdId;

So it ends up looking like this when its sent over the network:

newProdTitle=blahbalh&currentProdId=8392

You have to send that data via your XmlHttpRequest over to PHP. There's an example here on how to do it.

Finally, in PHP you would just reference the values you receive as $_POST['newProdTitle'] and $_POST['currentProdId']

Answer 2

xmlhttp.send(newProdTitle=document.getElementById("newProdTitle").value);
xmlhttp.send(newProdTitle=document.getElementById("currentProdId").value);

to this

var params = "newProdTitle=" + document.getElementById("newProdTitle").value +"&currentProdId=" + document.getElementById("currentProdId").value;
xmlhttp.send(params);

now to get the value from your phpscript

you can just call POST since you are using POST

example

$newProdTitle = $_POST['newProdTitle'];
$currentProdId= $_POST['currentProdId'];