Laravel计算剩余金额（Sisa）时出现[object HTMLInputElement]及404错误

问题描述 #

计算剩余金额Sisa（公式：Bayar - Diterima = Sisa）时，请求URL中出现[object HTMLInputElement]，引发404(Not Found)错误。

相关代码 #

视图JavaScript代码 #

function loadForm(diskon = 0) {
  $('#total').val($('.total').text());
  $('#total_item').val($('.total_item').text());

  $.get(`{{ url('transaksi-detail/loadform') }}/${diskon}/${$('.total').text()}/${diterima}`)
    .done(response => {
      $('#totalrp').val('Rp. '+ response.totalrp);
      $('#bayarrp').val('Rp. '+ response.bayarrp);
      $('#bayar').val(response.bayar);
      $('.tampil-bayar').text('Rp. '+ response.bayarrp);
    })
    .fail(errors => {
      alert('Tidak dapat menampilkan data');
      return;
    })
}

控制器PHP代码 #

public function loadForm($diskon = 0, $total, $diterima){
    $bayar      = $total - ($diskon / 100 * $total);
    $kembali    = ($diterima != 0) ? $diterima - $bayar : 0;
    $data       = [
        'totalrp'   => format_uang($total),
        'bayar'     => $bayar,
        'bayarrp'   => format_uang($bayar),
        'kembalirp' => format_uang($kembali)
    ];

    return response()->json($data);
}

路由PHP代码 #

Route::get('transaksi-detail/loadform/{diskon}/{total}/{diterima}', [PenjualanDetailController::class, 'loadForm'])->name('transaksi-detail.load_form');

问题根源 #

传递的diterima参数是DOM元素对象而非实际数值，拼接URL时对象被直接转为字符串[object HTMLInputElement]，不符合路由参数的数值要求，触发404错误。

解决方案 #

修改视图中的JavaScript代码，获取diterima对应的输入框数值，而非直接使用DOM对象：

function loadForm(diskon = 0) {
  $('#total').val($('.total').text());
  $('#total_item').val($('.total_item').text());

  // 根据实际页面结构调整选择器，获取diterima输入框的数值
  const diterimaValue = $('#diterima').val();

  // 可选：转换为数值类型，避免空值或非数值问题
  // const diterimaValue = parseFloat($('#diterima').val()) || 0;

  $.get(`{{ url('transaksi-detail/loadform') }}/${diskon}/${$('.total').text()}/${diterimaValue}`)
    .done(response => {
      $('#totalrp').val('Rp. '+ response.totalrp);
      $('#bayarrp').val('Rp. '+ response.bayarrp);
      $('#bayar').val(response.bayar);
      $('.tampil-bayar').text('Rp. '+ response.bayarrp);
    })
    .fail(errors => {
      alert('Tidak dapat menampilkan data');
      return;
    })
}

说明 #

• 若diterima不是ID选择器，需替换为对应类选择器（如$('.diterima').val()），匹配页面实际DOM结构。
• 添加parseFloat(...) || 0可确保参数始终为数值类型，避免空输入或非数值内容引发的后续逻辑错误。

内容的提问来源于stack exchange，提问作者Firdan Mahendra Wardana