Laravel8+Blade订单页total等字段不显示无控制台报错如何修复

修复说明 #

你代码的问题集中在jQuery事件绑定和计算逻辑的细节错误，以下是需要修改的点：

• 产品下拉框的change事件拼写错误，你写的是çhange（带乱码字符），导致选择产品后没有触发计算逻辑
• 新增行的序号列HTML语法错误，class"no"缺少等于号
• 未处理输入框为空的场景，空值转数字会得到NaN导致计算失效
• 删除行后没有重新计算总额
• 金额未做小数位数格式化，展示不规范

修复后的完整jQuery代码 #

替换你原来<script>标签里的所有JS代码即可：

// 新增商品行
$('.add_more').on('click',function(){
    var product = $('.product_id').html();
    var numberofrow = ($('.addMoreProduct tr').length - 0) + 1;
    // 修复class的语法错误
    var tr = '<tr><td class="no">'+ numberofrow + '</td>'+
    '<td><select class="form-control product_id" name="product_id[]">'+product+'</select></td>'+
    '<td><input type="number" name="quantity[]" class="form-control quantity" value="1"></td>'+
    '<td><input type="number" name="price[]" class="form-control price"></td>'+
    '<td><input type="number" name="discount[]" class="form-control discount" value="0"></td>'+
    '<td><input type="number" name="total_amount[]" class="form-control total_amount" readonly></td>'+
    '<td><a class="btn btn-warning btn-sm delete rounded-circle">Delete</a></td>';
    $('.addMoreProduct').append(tr);
});

// 删除商品行
$('.addMoreProduct').delegate('.delete','click',function(){
    $(this).parent().parent().remove();
    // 删除后重新计算总额
    TotalAmount();
});

// 计算所有商品总额
function TotalAmount(){
    var total = 0;
    $('.total_amount').each(function(i,e){
        var amount = parseFloat($(this).val()) || 0;
        total += amount;
    });
    // 保留两位小数
    $('.total').html(total.toFixed(2));
}

// 选择产品触发计算
// 修复事件名拼写错误
$('.addMoreProduct').delegate('.product_id','change',function(){
    var tr = $(this).parent().parent();
    var price = parseFloat(tr.find('.product_id option:selected').attr('data-price')) || 0;
    tr.find('.price').val(price);
    var qty = parseFloat(tr.find('.quantity').val()) || 1;
    var disc = parseFloat(tr.find('.discount').val()) || 0;
    var total_amount = (qty * price) - ((qty * price * disc) / 100);
    tr.find('.total_amount').val(total_amount.toFixed(2));
    TotalAmount();
});

// 修改数量、折扣触发计算
$('.addMoreProduct').delegate('.quantity,.discount', 'keyup change',function(){
    var tr = $(this).parent().parent();
    var qty = parseFloat(tr.find('.quantity').val()) || 1;
    var disc = parseFloat(tr.find('.discount').val()) || 0;
    var price = parseFloat(tr.find('.price').val()) || 0;
    var total_amount = (qty * price) - ((qty * price * disc) / 100);
    tr.find('.total_amount').val(total_amount.toFixed(2));
    TotalAmount();
});

额外优化说明 #

• 给数量默认值设为1、折扣默认值设为0，减少用户输入成本
• 总价输入框设为只读，避免用户手动修改导致数据不一致
• 增加change事件监听，用户用上下键调整数字时也会触发计算
• 所有数值转浮点型，避免字符串拼接的问题

内容的提问来源于stack exchange，提问作者Nirodha Lakmali