如何将Laravel控制器计算的折扣值自动填充到视图的输入框中

实现方案 #

你需要的实时计算效果属于前端交互逻辑，用原生JavaScript即可实现，无需依赖额外框架，同时你现有代码还有两处小问题需要同步修正：

1. 修正视图HTML代码

先给三个输入框添加id属性，方便JS获取元素，同时折扣输入框可设置为只读，避免用户手动修改导致数值不匹配：

<div class="form-group col-md-2">
    <label for="sale_price">售价</label>
    <input type="number" id="sale_price" pattern="[0-9]+([\.,][0-9]+)?" step="0.01" name="sale_price" class="form-control">
</div>

<div class="form-group col-md-3">
    <label for="discount_percentage">折扣百分比(%)</label>
    <input type="number" id="discount_percentage" name="discount_percentage" class="form-control">
</div>

<div class="form-group col-md-3">
    <label for="discount">折扣金额</label>
    <input type="number" id="discount" name="discount" class="form-control" readonly>
</div>

2. 添加前端计算逻辑

把以下JS代码放到页面</body>标签前即可实现实时计算效果：

// 获取三个输入框DOM元素
const salePriceInput = document.getElementById('sale_price');
const discountPercentInput = document.getElementById('discount_percentage');
const discountInput = document.getElementById('discount');

// 折扣计算函数
function calcDiscount() {
    // 取不到值默认设为0避免计算结果为NaN
    const price = parseFloat(salePriceInput.value) || 0;
    const percent = parseFloat(discountPercentInput.value) || 0;
    const discount = (price * percent) / 100;
    // 金额默认保留两位小数
    discountInput.value = discount.toFixed(2);
}

// 绑定输入事件，值变化时自动触发计算
salePriceInput.addEventListener('input', calcDiscount);
discountPercentInput.addEventListener('input', calcDiscount);

如果你的项目已经引入jQuery，可以用更简化的写法：

$(function() {
    $('#sale_price, #discount_percentage').on('input', function() {
        const price = parseFloat($('#sale_price').val()) || 0;
        const percent = parseFloat($('#discount_percentage').val()) || 0;
        $('#discount').val(((price * percent)/100).toFixed(2));
    });
});

3. 修正后端控制器代码

你现有控制器代码有两个问题需要调整：

• 调试用的dd($request->all())会中断请求执行，正式使用需要删除
• 计算折扣时直接使用了未定义的$sale_price和$discount_percentage变量，会触发报错，修改后代码如下：

public function store(Request $request){
    $presupuestoProducto = new PresupuestoProducto();
    $presupuestoProducto->sale_price = $request->sale_price;
    $presupuestoProducto->discount_percentage = $request->discount_percentage;
    // 从请求对象中获取参数计算
    $presupuestoProducto->discount = ($request->sale_price * $request->discount_percentage)/100;
    $presupuestoProducto->save();
    Session::flash('success');
    return redirect()->route('presupuestos-productos.view');
}

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