Problem transferring data from one site to another

Question

I have a database with products in it, and I also have a shop.php page where all the products are displayed. If I click on a specific product there, I will be redirected to the product.php page and the data displayed as shown:

session_start();
require_once "connection.php";

$product_id = $_GET['product_id'] ?? null;


if ($product_id) {
    $sql_product = "SELECT picture, product_name, price, Size FROM product WHERE product_id = ?";
    $stmt = mysqli_prepare($conn, $sql_product);
    mysqli_stmt_bind_param($stmt, "i", $product_id);
    mysqli_stmt_execute($stmt);
    $result_product = mysqli_stmt_get_result($stmt);

    if ($result_product && mysqli_num_rows($result_product) > 0) {
        $row_product = mysqli_fetch_assoc($result_product);

       
        $product_name = $row_product['product_name'];
        $product_price = $row_product['price'];
        $product_picture = $row_product['picture'];
    }

Then I want to send it to the cart.php page with an Ajax request when the user clicks on the addtocart button:

 document.getElementById("addToCartBtn").addEventListener("click", function(event) {
    event.preventDefault(); 

    var productName = "<?php echo $product_name; ?>";
    var productPrice = "<?php echo $product_price; ?>";
    var productPicture = "<?php echo $product_picture; ?>";
    var quantity = document.querySelector("select[name='quantity']").value;
    var size = document.getElementById("sizeSelect").value; 

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "cart.php", true); 
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            
            
            console.log(xhr.responseText); 
        }
    };
    
    xhr.send("product_name=" + encodeURIComponent(productName) + "&product_price=" + encodeURIComponent(productPrice) + "&product_picture=" + encodeURIComponent(productPicture) + "&quantity=" + encodeURIComponent(quantity) + "&size=" + encodeURIComponent(size));
});

And here is the cart.php, as I try to display the sent products:

if (!isset($_SESSION['cart'])) {
    $_SESSION['cart'] = array();
}

if (isset($_GET['remove_item'])) {
    $remove_index = $_GET['remove_item'];
    
    if (array_key_exists($remove_index, $_SESSION['cart'])) {
        unset($_SESSION['cart'][$remove_index]); 
    }
}

if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['index']) && isset($_POST['quantity'])) {
    $index = $_POST['index'];
    $quantity = $_POST['quantity'];
    
    if (array_key_exists($index, $_SESSION['cart'])) {
        $_SESSION['cart'][$index]['quantity'] = $quantity;
        echo $_SESSION['cart'][$index]['quantity'] * $_SESSION['cart'][$index]['product_price'] . '€'; 
    } else {
        echo "Error";
    }
    exit; 
}
<tr>
        <td><a href="cart.php?remove_item=<?php echo $index; ?>"><i class="fa-solid fa-circle-xmark"></i></a></td>
        <td><img src="<?php echo $item['product_picture']; ?>" alt="" style="width: 100px; height: auto;"></td>
        <td><?php echo $item['product_name']; ?></td>
        <td><?php echo $item['size']; ?></td>
        <td><?php echo $item['product_price']; ?>€</td>
        <td>
            <input type="number" id="quantity_<?php echo $index; ?>" value="<?php echo $item['quantity']; ?>" min="1" onchange="updateQuantity(<?php echo $index; ?>, this.value)">
        </td>
        <td id="total_<?php echo $index; ?>"><?php echo $item['quantity'] * $item['product_price']; ?>€</td>
    </tr>

I don't know what could be the cause of the problem. I think that the product.php page does not send the individual products for some reason.

Answer 1

This might be important for you to read up - GET & POST Request Training PHP Also : $_POST - PHP Manual

Now coming back to your code on the AJAX Xml HTTP Request (My suggestion use a library like JQuery to make it less verbose.) Your sending a HTTP POST Request on Client-side Javascript, so on server-side PHP needed to change your PHP code like this :

$product_id = $_POST['product_id'] ?? null;

Hope this helps.