使用JavaScript实现Django表单数值自动求和，无需提交或刷新页面

问题修正说明 #

原有代码存在以下问题：

• 仅在页面初始化时计算了一次总和，后续输入值变化不会重新计算
• 未将输入框的字符串类型值转为数字，直接相加会出现字符串拼接的问题
• 只给第一个输入框绑定了监听事件，修改第二个输入框的值不会触发更新
• 没有判断两个输入框是否都填写完成的逻辑

修正后实现代码 #

JS逻辑

const input1 = document.getElementById('item_1_amount')
const input2 = document.getElementById('item_2_amount')
const totalDom = document.getElementById('Total')

function updateTotal() {
  // 输入值转数字，空值默认转0
  const val1 = Number(input1.value) || 0
  const val2 = Number(input2.value) || 0
  // 两个输入框都有值时显示总和，否则保留原占位符
  if (input1.value.trim() && input2.value.trim()) {
    // 金额场景保留两位小数，不需要可以去掉toFixed(2)
    totalDom.innerText = `$${(val1 + val2).toFixed(2)}`
  } else {
    totalDom.innerText = '$$'
  }
}

// 同时监听两个输入框的input事件，覆盖键盘输入、粘贴、数值调整等所有修改场景
input1.addEventListener('input', updateTotal)
input2.addEventListener('input', updateTotal)

Django Forms适配说明

你可以直接在Django表单类中定义字段属性，不需要手动写input标签，表单示例：

from django import forms

class AmountCalculateForm(forms.Form):
    item_1_amount = forms.DecimalField(
        label="第一项金额",
        widget=forms.NumberInput(attrs={
            "autocomplete": "off",
            "class": "form-control w-25",
            "id": "item_1_amount",
            "style": "float:left"
        })
    )
    item_2_amount = forms.DecimalField(
        label="第二项金额",
        widget=forms.NumberInput(attrs={
            "autocomplete": "off",
            "class": "form-control w-25",
            "id": "item_2_amount",
            "style": "float:left"
        })
    )

模板中直接渲染表单字段即可：

<tr>
 <td>
    <h6 style="float:left; margin-right:5px; margin-top:7px">$</h6>
    {{ form.item_1_amount }}
  </td>
  <td>
    <h6 style="float:left; margin-right:5px; margin-top:7px">$</h6>
    {{ form.item_2_amount }}
  </td>
</tr>
<tr>
<th>Total</th>
<th id="Total">$$</th>
</tr>

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