PHP+MySQL+AJAX实现多选商品按购买数量统计总金额问题求助

你当前的代码存在三个核心问题导致仅能计算第一个商品的金额：

• 所有商品行的选择器、数量输入框都使用了重复ID，DOM操作只能匹配到第一个元素
• 每次提交仅传递单组商品ID和数量，没有收集所有选中商品的信息
• 后端逻辑仅处理单个商品的金额计算，没有累加多商品总价

按照以下步骤修改即可实现多商品总价累加计算：

1. 修改HTML结构 #

删除重复ID，替换为class，给每个商品行加标识类：

<div class="row product-row">
    <div class="col-xl-6 col-md-6 col-12 mb-1">
        <div class="form-group">
            <label>Produk</label>
            <select class="form-control product_id" name="product_id[]">
                <option value="">Pilih</option>
                <?php
                    $sql = mysqli_query($con, "SELECT * FROM product ORDER BY id ASC");
                    while($data = mysqli_fetch_array($sql)){
                ?>
                <option value="<?php echo $data['id']; ?>"><?php echo $data['name']; ?></option>
                <?php } ?>
            </select>
        </div>
    </div>
    <div class="col-xl-6 col-md-6 col-12 mb-1">
        <div class="form-group">
            <label>Jumlah Produk</label>
            <input type="number" class="form-control total_product" name="total_product[]" placeholder="Jumlah" />
        </div>
    </div>
</div>
<!-- 新增多组商品直接复制上面的product-row结构即可 -->
<input type="text" id="total" readonly placeholder="总金额">

2. 修改前端JS逻辑 #

改为事件委托，每次触发计算时遍历所有商品行，收集所有商品ID和数量数组传给后端：

$(document).ready(function(){
    // 同时监听数量输入、商品选择两种变化事件
    $(document).on('keyup change', '.total_product, .product_id', function(){
        let productIds = [];
        let productNums = [];
        // 遍历所有商品行收集有效数据
        $('.product-row').each(function(){
            let pid = $(this).find('.product_id').val();
            let num = $(this).find('.total_product').val();
            if(pid && num && Number(num) > 0){
                productIds.push(pid);
                productNums.push(num);
            }
        });
        // 无有效数据直接清空总金额
        if(productIds.length === 0){
            $('#total').val(0);
            return;
        }
        $.ajax({
            type: 'get',
            url: 'ajax-total.php',
            data: {
                'product_ids': productIds,
                'product_nums': productNums
            },
            success: function(data){
                let obj = JSON.parse(data);
                $('#total').val(obj.total);        
            }
        });
    });
})

3. 修改后端PHP逻辑 #

接收数组参数，循环计算每个商品的金额累加，同时修复原代码数据库连接变量不一致问题、增加SQL注入防护：

include '../koneksi.php';
// 统一数据库连接变量，和koneksi.php定义的变量保持一致
$productIds = $_GET['product_ids'] ?? [];
$productNums = $_GET['product_nums'] ?? [];
$total = 0;

foreach($productIds as $k => $pid){
    // 转义防止SQL注入
    $pid = mysqli_real_escape_string($con, $pid);
    $num = (int)$productNums[$k] ?? 0;
    if($num <= 0) continue;
    
    $query = mysqli_query($con, "SELECT sale_price FROM product WHERE id='$pid' LIMIT 1");
    $row = mysqli_fetch_assoc($query);
    if($row){
        $total += (int)$row['sale_price'] * $num;
    }
}

$data = array('total' => $total);
echo json_encode($data);

内容的提问来源于stack exchange，提问作者Khairunnisa Syahfitri