如何在Django单页面实现三个独立表单？解决变量未绑定报错

1. 修复UnboundLocalError报错 #

报错原因是当请求为GET时，p_form、m_form、b_form三个变量未定义就被放入context。需要在if分支外初始化这三个表单，确保无论请求类型如何，变量都存在：

def profile(request):
    # 初始化三个表单，GET请求时加载用户当前数据
    p_form = ProfileUpdateForm(instance=request.user.profile)
    m_form = ProfileUpdateFormm(instance=request.user.profile)
    b_form = ProfileUpdateFormb(instance=request.user.profile)

    if request.method == 'POST':
        # 根据提交按钮的name判断处理哪个表单
        if 'p_form_submit' in request.POST:
            p_form = ProfileUpdateForm(request.POST, request.FILES, instance=request.user.profile)
            if p_form.is_valid():
                p_form.save()
                return HttpResponseRedirect(request.META.get('HTTP_REFERER', '/'))
        elif 'm_form_submit' in request.POST:
            m_form = ProfileUpdateFormm(request.POST, request.FILES, instance=request.user.profile)
            if m_form.is_valid():
                m_form.save()
                return HttpResponseRedirect(request.META.get('HTTP_REFERER', '/'))
        elif 'b_form_submit' in request.POST:
            b_form = ProfileUpdateFormb(request.POST, request.FILES, instance=request.user.profile)
            if b_form.is_valid():
                b_form.save()
                return HttpResponseRedirect(request.META.get('HTTP_REFERER', '/'))

    context={'p_form': p_form,'m_form': m_form,'b_form': b_form}
    return render(request, 'app/profile_form.html',context )

2. 模板中配置独立表单提交 #

在profile_form.html里，给每个表单单独包裹<form>标签，并给提交按钮添加唯一的name属性，确保表单提交时互不干扰：

<!-- 第一个表单 -->
<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ p_form.as_p }}
    <button type="submit" name="p_form_submit">更新基础信息</button>
</form>

<!-- 第二个表单 -->
<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ m_form.as_p }}
    <button type="submit" name="m_form_submit">更新扩展信息M</button>
</form>

<!-- 第三个表单 -->
<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ b_form.as_p }}
    <button type="submit" name="b_form_submit">更新扩展信息B</button>
</form>

核心逻辑说明 #

• 每个表单独立使用<form>标签，提交时仅发送当前表单的数据，避免跨表单数据污染
• 通过提交按钮的name属性标记表单身份，视图仅处理对应提交的表单，提升效率
• GET请求时预先初始化表单并绑定用户实例，确保页面加载时显示当前用户的已有数据

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