PHP Ajax添加到购物车无法正常工作

Question

Hi my add to cart button is not working with ajax and i cant see where the problem is. So far when I clicked the add to cart button nothing is happening like the button is not calling the ajax function. Can you guys help me with this I'm new to ajax and I resources on internet can't help me either on this. Thanks

Button

<input type="button" name="add_to_cart" id = "<?PHP echo $row["cardID"];?>" class="add_to_cart" value="Add to Cart" />

Ajax

<script>
 $(document).ready(function(data){

  $('.add_to_cart').click(function(){
    var product_id = $(this).attr("cardID");
    var prodcut_name = $('#name' + product_id).val();
    var product_price = $('#price' + product_id).val();
    var product_quantity = $('#quantity' + product_id).val();
    var action = "add";
     if(product_quantity > 0){
       $.ajax({
       url="action.php",
       method:"POST",
       dataType:"json",
       data:{
          product_id:product_id,
          prodcut_name:prodcut_name,
          product_price:product_price,
          product_quantity:product_quantity,
          action:action
        },
        success:function(data)
        {
         $('#order_table').html(data.order_table);
         $('.badge').text(data.cart_item);
      alert("Product has been added to cart");
        }
    });
  }else{
    alert("Please Enter Number of Quantity");
  }
  });
  });
</script>

Here is my action.php

action.php

<?php
session_start();
include_once('connection.php');
if(isset($_POST["product_id"]))
{
$order_table = '';
$message = '';
if($_POST["action"] == "add")
{
    if(isset($_SESSION["shopping_cart"]))
    {
        $is_available = 0;
        foreach($_SESSION["shopping_cart"] as $keys => $values)
        {
            if($_SESSION["shopping_cart"][$keys]['product_id'] == 
$_POST["product_id"])
            {
                $is_available++;
                $_SESSION["shopping_cart"][$keys]['product_quantity'] = 
$_SESSION["shopping_cart"][$keys]['product_quantity'] + $_POST["product_quantity"];
            }
        }
        if($is_available < 1)
        {
            $item_array = array(
                'product_id'            =>  $_POST["product_id"],
                'product_quantity'      =>  $_POST["product_quantity"],
                'product_name'          =>  $_POST["product_name"],
                'product_price'         =>  $_POST["[product_price"]
            );
            $_SESSION["shopping_cart"][] = $item_array;
        }
    }
    else
    {
        $item_array = array (
                'product_id'            =>  $_POST["product_id"],
                'product_quantity'      =>  $_POST["product_quantity"],
                'product_name'          =>  $_POST["product_name"],
                'product_price'         =>  $_POST["[product_price"]
        );
        $_SESSION["shopping_cart"][] = $item_array;
    }
    $order_table .= '
        <table class="table table-bordered">
        <tr>
            <th width = "20%">Quantity</th>
            <th width = "40%">Card</th>
            <th width = "20%">Price</th>
            <th width = "20%">Action</th>
        </tr>
    ';
    if(!empty($_SESSION["shopping_cart"]))
    {
        $total = 0;
        foreach($_SESSION["shopping_cart"] as $keys => $values)
        {
            $order_table .= '
                <tr>
                    <td>'.$values["product_quantity"].'</td>
                    <td>'.$values["product_name"].'</td>
                    <td align = "right">'.$values["product_price"].'</td>
                    <td><button name = "delete" class = "delete" id="'.$values["product_id"].'">&times;</button></td>
                </tr>
            ';
            $total = $total + ($values["product_quantity"] * $values["product_price"]);
        }
        $order_table .='
            <tr>
                <td colspan="3" align = "right">Total</td>
                <td align = "right">$ '.number_format($total, 2).'</td>
            </tr>
        ';
    }
    $order_table .= '</table>';
        $output = array(
            'order_table'       =>  $order_table,
            'cart_item'         =>  count($_SESSION["shopping_cart"])
        );
    }
    echo json_encode($output);

}
?>

Thanks in advance guys new in ajax.

Answer 1

The issue seems to with this line

var product_id = $(this).attr("cardID");

There is no such attribute. It seems you want to get the id of the element.Replace it with id

var product_id = $(this).attr("id");