Add to database with mysql, ajax and php - php

Question

I have a file cart.html which displayes a list of items fetched from database and each item has a button 'AddToCart' which when clicked call the function addDB() and add the product to the table product_add.
My problem is that when the button 'AddToCart' is clicked only nulll values are inserted in the table product_add .
//This function is found in the cart.html and get the items from the database
$(document).ready(function() {
$("#product").click(function() {
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "allProducts.php",
dataType: "html", //expect html to be returned
success: function(response){
$("#responsecontainer").html(response);
//alert(response);
}
});
});
});
//the above function is called when a button 'View All Products' is clicked
<input type="button" id="cart" value="View Cart"/>
The above code works fine and displayes the result
//These lines of codes are in the allProducts.php
echo "<tr>";
echo "<td>".$row['id']."</td>";
echo "<td><img src=".$row['image']." width='120' height='100'/></td>";
echo "<td>".$row['name']."</td>";
echo "<td>".$row['price']."</td>";
echo "<td>";
echo "<input type='button' value='Add to Cart' onclick='addDB()'/>";
echo "</td>";
echo "</tr>";
Here is the function addDB()
function addDB() {
var request = $.ajax({
url: "add.php",
type: "GET",
dataType: "html"
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
};
This is the add.php
<?php
include 'dbConnect.php';
$id = isset($_GET['id']) ? $_GET['id'] : "";
$name = isset($_GET['name']) ? $_GET['name'] : "";
$price= isset($_GET['price']) ? $_GET['price'] : "";
$insert = "INSERT INTO product_add(id, name, price) VALUES ('$id', '$name','$price')";
$insertQuery=mysql_query($insert);
?>
My problem is that when the button 'AddToCart is clicked' null or 0 are being inserted in the database.Can somebody please help me ?

Answer 1

You are not sending any data to the php-page. A simple approach would be to pass them via GET-Parameters in the url of you AJAX-Call:
function addDB(id, name ,price) {
var request = $.ajax({
url: "add.php?id=" + id + "&name=" + name + "&price=" + price,
type: "GET"
});
request.done(function() {
alert("Ajax call done.");
});
}
Also, your code is vulnerable to sql-injections. Please do ALWAYS use prepared statements
You modified add.php would then look like this:
<?php
include 'dbConnect.php';
$id = isset($_GET['id']) ? $_GET['id'] : "";
$name = isset($_GET['name']) ? $_GET['name'] : "";
$price= isset($_GET['price']) ? $_GET['price'] : "";
$query = $mysqli->prepare("INSERT INTO product_add(id, name, price) VALUES (?, ?, ?)");
$query->bind_param("isi", $id, $name, $price);
$query->execute();
$query->close();
?>
You would of course have to initialize the object "$mysqli" somehow in your file dbConnect.php in order to use it.