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

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 提交之前我该如何填充总数呢？就像如果我更改检查费，总费用将根据总值(value)自动调整。 寻求帮助。 提前致谢。

Answer 1

1. 将总输入字段设置为只读
2. 创建一个函数来将所有输入相加并在 total_fee 中设置值(使用 Array.prototype.reduce 的好机会)
3. 将您的函数绑定(bind)到输入 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>