如何将Javascript计算的总金额传递到Django后端并存入对应模型字段

标签的内容不会随表单自动提交到后端，你可以选择以下两种方案实现需求：

---

方案1：前端传值（实现简单） #

步骤1：修改HTML模板，添加隐藏表单字段 #

在总金额展示区域附近新增隐藏输入框，用来存储计算出的总金额随表单提交：

<thead class="table-light">
    <tr>
        <th scope="col">Total Equipment and Assets</th>
        <th scope="col" id="Total"></th>
    </tr>
</thead>
<!-- 新增隐藏输入框 -->
<input type="hidden" name="total_assets" id="total_assets">

步骤2：修改JS代码，同步给隐藏输入框赋值 #

在原有计算总和的逻辑后新增赋值代码，同时优化计算逻辑避免无输入时返回NaN：

<script>
const q=(e,n=document)=>n.querySelector(e);
const qa=(e,n=document)=>n.querySelectorAll(e);
const results={};
console.log(results)
qa('[type="number"].form-control').forEach(input=>input.addEventListener('input',function(e){
  results[ this.name ]=Number( this.value );
  // 增加reduce初始值0，避免无输入时计算异常
  const resultGroupSet1 = [...qa('.subtotal-group-1')]
                          .map(s => Number(s.value))
                          .reduce((a,v) => a+v, 0);
  q('th#Total').textContent = resultGroupSet1;
  // 新增：把计算结果赋值给隐藏输入框
  q('#total_assets').value = resultGroupSet1;
}));
</script>

步骤3：确认Django表单类包含对应字段 #

如果你使用的是ModelForm绑定模型，确保表单的fields列表中包含total_assets字段：

# forms.py示例
from django import forms
from .models import 你的模型类名

class infoForm(forms.ModelForm):
    class Meta:
        model = 你的模型类名
        # 确保total_assets在字段列表中
        fields = ['item_1', 'item_1_amount', 'item_2', 'item_2_amount', 'total_assets']

---

方案2：后端二次计算（更安全，防前端篡改） #

如果担心用户恶意修改前端代码篡改总金额，推荐直接在后端计算总和再赋值，不需要修改任何前端代码，仅修改views.py即可：

def add_bp(request):
    if request.method == 'POST':
        form = infoForm(request.POST)
        if form.is_valid():
            # 新增：后端计算总金额赋值
            item1_amount = form.cleaned_data.get('item_1_amount', 0) or 0
            item2_amount = form.cleaned_data.get('item_2_amount', 0) or 0
            form.instance.total_assets = item1_amount + item2_amount
            form.save()
            b_name = form.cleaned_data.get('bName')
            messages.success(request, f'PDF created for {b_name}!')
            return redirect('application:core')
    else:
        form = infoForm()
    return render(request, 'application/template.html', {'form': form, })

---

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