在图像切换上更新php Session变量

Question

I am trying to allow users to add/remove items from a shopping cart by simply clicking an image. I also want the image to change on click to show how many of this item has been purchased.

Finally, I want the cart to exist on a separate tab of the same page.

What I have so far is:

<?php session_start(); ?>
...
...
<div style="display: block; width:1024px;">
<img id="image_id" src="image.png" width="110" height="110" style="margin-left:40px";>
<script>

$('#image_id').toggle(
    function() {
        $(this).attr('src','image1.png');
        <?php $_SESSION['cart']['image_id'] = 1; ?>
    },
    function() {
        $(this).attr('src','image2.png');
        <?php $_SESSION['cart']['image_id'] = 2; ?>
    },
    function() {
        $(this).attr('src','image3.png');
        <?php $_SESSION['cart']['image_id'] = 3; ?>
    },
    function() {
        $(this).attr('src','image.png');
    <?php// $_SESSION['cart']['image_id'] = 0; ?>
    }
);
</script>
...
...
</div>

<!-- Cart Tab -->

<div id="tab4" style="display:none; width:1024px; padding-top:40px;">

<table border="1">
<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>

<?php
    if($_SESSION['cart']) {
        foreach($_SESSION['cart'] as $itemname => $quantity)
        {
            if($quantity == 0) continue;
            $price = $_SESSION['items'][$itemname];
            $prod = $price*$quantity;
            $_SESSION['total'] += $prod;
            echo "<tr>";
            echo "<td>" . $itemname . "</td>";
            echo "<td>" . $price . "</td>";
            echo "<td>" . $quantity . "</td>";
            echo "<td>" . $prod . "</td>";
            echo "</tr>";
        }
        echo "<tr>";
        echo "<td></td>";
        echo "<td></td>";
        echo "<td></td>";
        echo "<td>" . $_SESSION['total'] . "</td>";
        echo "</tr>";
        echo "</table>";
    }    
?>

<a href="#tab1">Continue Shopping</a>

</div>

The problem I'm having is that the image changes correctly (only changes when I click it and toggles through the four different images), but when I view the contents of the cart, it doesn't change. It executes all 4 php statements immediately. I know because if I remove the final toggle switch(where I reset the quantity to 0) and view the cart, it already shows that I have 3 items to be purchased before I even click once.

Any help would be appreciated. I am guessing I could also have constructed the images as form inputs, or hyperlinks that execute a script on click, but I have tried both approaches with no luck.

Thank you in advance.

Answer 1

Javascript is executed in the browser, and php is executed on the server, before the page is served to the user.

Your PHP snippets are not executed when the javascript is called, rather they are executed on the server before the user even sees the page.

Instead of putting the PHP code directly in the javascript functions you need to use an AJAX call there that sends a request to the server.

That said, it looks like in this particular case it might be better to store the cart information in cookies rather than the session.