如何在Laravel项目中创建并展示自动计算的折扣金额字段

第一步：修正控制器逻辑错误 #

你当前的控制器代码存在变量未定义的问题，$sale_price和$discount_percentage没有声明，同时缺失了迁移文件中要求的必填字段赋值，调整后代码如下：

public function store(Request $request){
    $presupuestoProducto = new PresupuestoProducto();

    $presupuestoProducto->presupuesto_id = $request->presupuesto_id;
    // 补充迁移要求的必填字段赋值，避免数据库写入报错
    $presupuestoProducto->product_id = $request->product_id;
    $presupuestoProducto->quantity = $request->quantity;
    $presupuestoProducto->sale_coin = $request->sale_coin;
    $presupuestoProducto->AlicuotaIVA = $request->AlicuotaIVA;
    $presupuestoProducto->commentary = $request->commentary ?? '';

    $presupuestoProducto->sale_price = $request->sale_price;
    $presupuestoProducto->discount_percentage = $request->discount_percentage;
    // 修正变量引用，从请求中取对应值计算
    $presupuestoProducto->discount = ($request->sale_price * $request->discount_percentage) / 100;

    $presupuestoProducto->save();
    // 将计算好的折扣金额闪存到session，返回视图时可直接读取
    Session::flash('discount', $presupuestoProducto->discount);
    Session::flash('success');
    return redirect()->route('presupuestos-productos.view');
}

第二步：修改视图代码 #

根据你的使用场景二选一即可：

场景1：表单提交后展示后端计算结果 #

将原discount输入框改为只读属性，直接读取session返回的计算值：

<div class="form-group col-md-2">
    <label for="sale_price">Precio de Venta</label>
    <input type="number"  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">Porcentaje de descuento (%)</label>
    <input type="number" name="discount_percentage" class="form-control">
</div>
<div class="form-group col-md-3">
    <label for="discount">Descuento</label>
    <!-- 只读属性禁止用户输入，提交后自动显示后端计算结果 -->
    <input type="number" name="discount" class="form-control" value="{{ Session::get('discount', 0) }}" readonly>
</div>

场景2：用户输入时实时展示计算结果 #

无需触发后端请求，新增一段前端JS即可实现实时计算，后端仍需保留计算逻辑作为数据校验，避免前端篡改数据：

<!-- 原有表单部分，补充输入框id属性用于JS绑定 -->
<div class="form-group col-md-2">
    <label for="sale_price">Precio de Venta</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">Porcentaje de descuento (%)</label>
    <input type="number" id="discount_percentage" name="discount_percentage" class="form-control">
</div>
<div class="form-group col-md-3">
    <label for="discount">Descuento</label>
    <input type="number" id="discount" name="discount" class="form-control" readonly>
</div>

<!-- 新增实时计算JS代码 -->
<script>
const salePriceInput = document.getElementById('sale_price');
const discountPercentInput = document.getElementById('discount_percentage');
const discountInput = document.getElementById('discount');

function calcDiscount() {
    const salePrice = parseFloat(salePriceInput.value) || 0;
    const discountPercent = parseInt(discountPercentInput.value) || 0;
    discountInput.value = (salePrice * discountPercent / 100).toFixed(2);
}

// 监听输入框变化自动计算
salePriceInput.addEventListener('input', calcDiscount);
discountPercentInput.addEventListener('input', calcDiscount);
</script>

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