Django表单单选值求和并保存至数据库问题求助

1. 修正表单定义（forms.py） #

你原来直接对表单字段做加法的写法是错误的，表单字段不能直接进行算术运算。我们删掉错误的total字段，换成一个隐藏字段用来存储计算后的总和：

class FormTest(forms.Form):
    CHOICES = [
        ('0', '0'),
        ('1', '1'),
        ('2', '2'),
        ('3', '3'),
        ('4', '4'),
        ('5', '5'),        
    ]
    num1 = forms.ChoiceField(widget=forms.RadioSelect, choices=CHOICES)
    num2 = forms.ChoiceField(widget=forms.RadioSelect, choices=CHOICES)
    num3 = forms.ChoiceField(widget=forms.RadioSelect, choices=CHOICES)
    # 新增隐藏字段，用来存计算好的总和
    total = forms.IntegerField(widget=forms.HiddenInput(), required=False)

2. 前端加JS实现实时求和（testform.html） #

在模板里添加JavaScript代码，监听单选框的选择变化，实时计算总和并显示，同时把结果同步到隐藏字段里：

{% extends 'layouts/base.html' %}
{% block content %}

    <h1>Test Form</h1>
    <form method="post" id="sum-form">
        {% csrf_token %}
        {{ form.as_p }}
        <!-- 用来显示实时总和的区域 -->
        <div>当前总和: <span id="total-display">0</span></div>
        <button type="submit">Save</button>        
    </form>

    <script>
        // 获取所有单选框、总和显示元素和隐藏字段
        const radioInputs = document.querySelectorAll('input[type="radio"]');
        const totalDisplay = document.getElementById('total-display');
        const totalInput = document.getElementById('id_total');

        // 计算总和的函数
        function calculateTotal() {
            let sum = 0;
            // 遍历三个单选组，找到选中的值相加
            ['num1', 'num2', 'num3'].forEach(name => {
                const selected = document.querySelector(`input[name="${name}"]:checked`);
                if (selected) {
                    sum += parseInt(selected.value);
                }
            });
            // 更新显示内容和隐藏字段的值
            totalDisplay.textContent = sum;
            totalInput.value = sum;
        }

        // 给每个单选框绑定选择变化事件
        radioInputs.forEach(input => {
            input.addEventListener('change', calculateTotal);
        });

        // 页面加载完成后自动计算一次（如果有默认选中值）
        document.addEventListener('DOMContentLoaded', calculateTotal);
    </script>

{% endblock %}

3. 修正视图逻辑（views.py） #

处理表单提交时，同时把三个选中的数字存入Test模型，总和存入Dato模型：

def formtest(request):
    if request.method == 'GET':
        return render(request, 'testform.html', {
            'form': FormTest(),
        })
    else:
        # 先验证表单数据合法性
        form = FormTest(request.POST)
        if form.is_valid():
            # 取出验证后的数值并转成整数
            num1 = int(form.cleaned_data['num1'])
            num2 = int(form.cleaned_data['num2'])
            num3 = int(form.cleaned_data['num3'])
            # 可以选择用前端传的总和，也可以后端自己算（更安全，防止前端篡改）
            total = num1 + num2 + num3  # 推荐用这种后端计算的方式

            # 保存到对应模型
            Test.objects.create(num1=num1, num2=num2, num3=num3)
            Dato.objects.create(dato=total)
        return redirect('forms')

额外说明 #

• 表单里不能直接对字段做加法，所以换成隐藏字段传递总和；如果担心用户篡改前端数据，直接在后端把三个数字重新加一遍就行，不用依赖前端传的总和。
• JS代码会在用户每次选单选框时自动计算总和，实时显示给用户，提升体验。
• 视图里用cleaned_data取数据，是为了确保数据经过Django的表单验证，避免非法值存入数据库。

内容的提问来源于stack exchange，提问作者Paty Pizá