根据每个输入字段的值填充总计总值

Question

我想在提交表单之前自动计算并填充总计.总计将基于我的5个输入字段.

<input type="number" name="inspection_fee">
<input type="number" name="storage_fee">
<input type="number" name="local_fee">
<input type="number" name="cert_fee">
<input type="number" name="others_fee">

<input type="number" name="total_fee">

我知道怎么做php的方式,就像我提交变量后放置变量然后完全像这样计算它.

<?php
$inspection_fee = $paymentSettings->inspection_fee;
$storage_fee = $paymentSettings->storage_fee;
$cert_fee = $paymentSettings->cert_fee;
$local_fee = $paymentSettings->local_fee;
$others_fee = $paymentSettings->others_fee;

$total_fee = $inspection_fee + $storage_fee + $cert_fee + $local_fee + $others_fee;
?>

但是在使用javascript提交之前我将如何填充总数？就像我更改检查费一样,总费用将自动调整取决于总价值.寻求帮助.提前致谢.

Answer 1

1. 将总输入字段设置为只读
2. 创建一个函数来添加所有输入并设置值total_fee(很好的使用机会Array.prototype.reduce)
3. 将您的函数绑定到输入input事件

const inputs = ['inspection_fee', 'storage_fee', 'local_fee', 'cert_fee', 'others_fee']
const total = document.querySelector('input[name="total_fee"]')

const sumTotal = () => {
  total.value = inputs.reduce((sum, input) =>
    sum += parseInt(document.querySelector(`input[name="${input}"]`).value || 0, 10), 0)
}

inputs.forEach(input => {
    document.querySelector(`input[name="${input}"]`).addEventListener('input', sumTotal, false)
})

<input type="number" name="inspection_fee">
<input type="number" name="storage_fee">
<input type="number" name="local_fee">
<input type="number" name="cert_fee">
<input type="number" name="others_fee">

<input type="number" name="total_fee" readonly>