AJAX XMLHTTPREQUEST Update MySQL table

Question

I have a problem.. maybe someone could help me. I'm trying to update a table using AJAX(not Jquery's version of Ajax) and PHP.

this is my code for:

PHP

    $product_id = filter_var($_POST["product_id"], FILTER_SANITIZE_STRING);

    $prod_name = $_POST['prod_name'];  
    $prod_name = mysqli_real_escape_string($con,$prod_name);

    $description = $_POST['descrip'];  
    $description = mysqli_real_escape_string($con,$description);

    $category = $_POST['category'];
    $category = mysqli_real_escape_string($con,$category);

    $stockLevel = $_POST['stockLevel'];
    $stockLevel = mysqli_real_escape_string($con,$stockLevel);

    $price = $_POST['price'];
    $price = mysqli_real_escape_string($con,$price);

  $updateQuery = "UPDATE items SET prod_name='$prod_name', category='$category', descrip='$description', stockLevel='$stockLevel', price='$price' WHERE id='$product_id' ";  
    mysqli_query($con,$updateQuery) or die("problem");

AJAX

function upd() {

var product_id = document.getElementById("product_id").value;
var pn_display = document.getElementById("pn_display").value;
var category_display = document.getElementById("category_display").value;
var description = document.getElementById("description").value;
var stock_display = document.getElementById("stock_display").value;
var price_display = document.getElementById("price_display").value;
xhr = new XMLHttpRequest();

var formdata = new FormData();
formdata.append("product_id",product_id);
formdata.append("pn_display",pn_display);
formdata.append("category_display",category_display);
formdata.append("description",description);
formdata.append("stock_display",stock_display);
formdata.append("price_display",price_display);


xhr.open("POST","update.php",true);
xhr.send(formdata);

}

what is wrong?

Answer 1

You'll have to name the members of your JavaScript formdata-object the same as the names of the keys you use in the PHP $_POST array.

So in formdata.append( name, value ); and $value = $_POST['name'];, "name" has to match in both your JavaScript en PHP code:

JavaScript:

function upd() {
    var description = document.getElementById("description").value;
    // etc...

    var formdata = new FormData();
    formdata.append("description",description);
    // etc...

    var xhr = new XMLHttpRequest();
    xhr.open("POST","update.php",true);
    xhr.send(formdata);
}

PHP:

$description = $_POST['description'];  // So not: $_POST['descrip']
$description = mysqli_real_escape_string($con,$description);
// etc...

$updateQuery = "UPDATE items SET descrip='$description' ...";  
// etc...

BTW, what's the problem with using jQuery? With jQuery you could simply do:

Using jQuery:

function upd() {
    var desc = $("#description").val();
    // etc...

    $.post("update.php", {
            description: desc // The left side of the colon has to match $_POST['description']
            // etc...
        }, function(response) {
            // Optional: Do something when de call is finished
            console.info("Response = " + response);
        }
    });
}

For more info you can visit jquery.com