Laravel 9中因无法获取前端jumlah值导致数据保存失败的解决方案

问题根源 #

1. 重复DOM标识与参数传递缺失：循环渲染的所有商品数量输入框共用同一个name="jumlah"和id="jumlah"，既违反DOM唯一性规则，点击"Tambah"时pilihProduk函数也未传递当前行的数量值，导致控制器收不到jumlah参数。
2. 无参数校验：控制器未对请求参数做验证，当jumlah缺失时，赋值给模型会触发数据库必填整数字段的约束，最终保存失败。
3. 小计计算逻辑错误：原代码里subtotal直接等于商品采购价，未乘以数量，不符合业务逻辑。

修复步骤 #

1. 修改前端循环代码，传递正确数量参数 #

调整Blade模板中的输入框和点击事件，确保每个商品的数量输入框有唯一标识，并在点击时传递对应数量：

@foreach ($produk as $key => $item)
    <tr>
        <td>{{ $item->kode_produk }}</td>
        <td>{{ $item->nama_produk }}</td>
        <td>
            <input type="number" 
                   name="jumlah_{{ $item->id_produk }}" 
                   id="jumlah_{{ $item->id_produk }}" 
                   class="form-control jumlah-input"
                   value="1" 
                   min="1" 
                   max="{{ $item->stok }}">
        </td>
        <td>{{ format_uang($item->harga_beli) }}</td>
        <td>
            <a class="btn icon btn-sm btn-success" 
               title="Tambah"
               onclick="pilihProduk('{{ $item->id_produk }}', '{{ $item->kode_produk }}', document.getElementById('jumlah_{{ $item->id_produk }}').value)">
                Tambah
            </a>
        </td>
    </tr>
@endforeach

2. 更新前端请求函数，携带数量参数 #

确保pilihProduk函数发送AJAX请求时，将jumlah参数包含在请求体中（以Axios为例）：

function pilihProduk(idProduk, kodeProduk, jumlah) {
    // 替换为实际的采购单ID获取逻辑
    const idPembelian = document.getElementById('id_pembelian').value;

    axios.post('/pembelian-detail/store', {
        id_pembelian: idPembelian,
        id_produk: idProduk,
        jumlah: parseInt(jumlah) // 确保转为整数类型
    })
    .then(response => {
        alert(response.data);
        // 可添加刷新列表等后续逻辑
    })
    .catch(error => {
        alert(error.response?.data || '请求失败');
    });
}

3. 优化控制器逻辑，添加参数验证与业务校验 #

修改store方法，增加参数校验、库存检查，并修复小计计算：

public function store(Request $request)
{
    // 验证请求参数合法性
    $validated = $request->validate([
        'id_pembelian' => 'required|exists:pembelian,id_pembelian',
        'id_produk' => 'required|exists:produk,id_produk',
        'jumlah' => 'required|integer|min:1',
    ]);

    $produk = Produk::where('id_produk', $validated['id_produk'])->first();
    if (! $produk) {
        return response()->json('Produk tidak ditemukan', 400);
    }

    // 检查采购数量是否超过库存
    if ($validated['jumlah'] > $produk->stok) {
        return response()->json('Jumlah melebihi stok yang tersedia', 400);
    }

    $detail = new PembelianDetail();
    $detail->id_pembelian = $validated['id_pembelian'];
    $detail->id_produk = $produk->id_produk;
    $detail->harga_beli = $produk->harga_beli;
    $detail->jumlah = $validated['jumlah'];
    $detail->subtotal = $produk->harga_beli * $validated['jumlah']; // 正确计算小计
    $detail->save();

    return response()->json('Data berhasil disimpan', 200);
}

验证修复效果 #

1. 选择任意商品修改数量后点击"Tambah"，检查AJAX请求的参数中是否包含正确的jumlah值。
2. 查看pembelian_detail表，确认jumlah和subtotal字段是否正确存储。

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