如何使用JQuery计算动态输入项的价格与数量 订餐Web应用开发问题

实现思路 #

核心逻辑是封装一个全局的总价计算函数，监听所有菜品行的单价变更和数量变更事件，每次触发时遍历所有菜品行计算累加总和即可，兼容你已有的动态新增行逻辑。

第一步：优化PHP接口（修复SQL注入风险） #

你现有的PHP代码虽然用了prepare，但直接拼接SQL参数存在严重注入风险，修改为参数绑定写法：

<?php    
    require 'DBConnection.php';
    $code = '';
    if(isset($_POST["code"])){
        $id = $_POST["code"];
        // 改为参数绑定避免注入
        $get_c = $pdo->prepare("SELECT * FROM all_menu WHERE `item_name` = ?");
        $get_c->execute([$id]); 
        while ($row = $get_c->fetch()) {
            $code .= $row['price'];
        }
        echo $code.'.00';
    }
?>

第二步：替换原有jQuery逻辑 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
<script>
$(document).ready(function(){
    var nextRowID = 0;

    // 公共计算总价函数
    function calculateTotal() {
        let total = 0;
        // 遍历所有菜品行
        $('.getval').each(function() {
            let price = parseFloat($(this).find('.price').val()) || 0;
            let quantity = parseInt($(this).find('.quantity').val()) || 0;
            total += price * quantity;
        });
        // 保留两位小数赋值给总金额
        $('#total').val(total.toFixed(2));
    }

    // 新增行逻辑
    $('#add').click(function(e){
        e.preventDefault();
        var id = ++nextRowID;
        $('#append').append(`<div class="form-group"><label class="control-label col-lg-4"></label><div id ="diva" class="col-lg-4"><div class="box"><header><h5>تفاصيل الطلب</h5></header><div class="body getval"><div class="form-group"><label class="control-label col-lg-2">الصنف</label><div class="col-lg-10"><select id="itemname${id}" name="itemname[]" class="form-control"><option disabled selected>اختر الصنف</option><?php echo getValues($pdo); ?></select></div></div><div class="form-group"><label class="control-label col-lg-2">السعر</label><div class="col-lg-10"><input type="text" id="price${id}" name="price[]" placeholder="-" readonly class="form-control price"></div></div><div class="form-group"><label class="control-label col-lg-2">الكمية</label><div class="col-lg-10"><input class="form-control quantity" type="number" name="quantity[]" value="0" min="1"></div></div></div></div></div></div>`);
    });

    // 事件委托监听所有菜品选择变更（兼容静态+动态新增行）
    $(document).on('change', 'select[name^="itemname"]', function(){
        const $currentRow = $(this).closest('.getval');
        const $priceInput = $currentRow.find('.price');
        var code = $(this).val();  
        $.ajax({
            type: 'POST',
            url: 'pages/GetPrice.php',
            data:{code:code},
            success: function(data){
                $priceInput.val(data);
                // 单价更新后重新计算总价
                calculateTotal();
            },
            error: function (jqXHR, textStatus, errorThrown){
                alert(errorThrown);
            }
        });
    });

    // 事件委托监听所有数量输入变更
    $(document).on('input change', 'input[name^="quantity"]', function(){
        calculateTotal();
    });
});
</script>

方案说明 #

• 用事件委托替代单独绑定事件，不需要为每个新增行重复写监听逻辑，代码更简洁易维护
• 每次修改菜品、修改数量都会自动触发总价重算，自动累加所有行的单价*数量结果
• 兼容你原有HTML结构和动态新增行的逻辑，不需要修改现有HTML代码

内容的提问来源于stack exchange，提问作者Hazem Behairy