HTMX表单提交后出现重复表单问题求助

1. 检查AllergyCreateView的响应逻辑 #

Django的CreateView默认在表单验证通过后执行重定向，但HTMX需要返回HTML片段而非重定向。如果视图未正确处理POST成功后的响应，极易导致重复渲染：

• 覆盖form_valid方法，跳过默认重定向，返回包含更新后列表+空表单的片段。示例代码：

from django.views.generic.edit import CreateView
from django.http import HttpResponse
from .models import Allergy
from .forms import AllergyForm

class AllergyCreateView(CreateView):
    model = Allergy
    form_class = AllergyForm
    template_name = 'allergy/allergy_form.html'

    def form_valid(self, form):
        self.object = form.save()
        # 传入空表单实例，避免复用绑定过数据的表单
        context = self.get_context_data(form=AllergyForm())
        context['allergies'] = Allergy.objects.all()
        # 渲染包含列表和空表单的完整片段
        return HttpResponse(self.render_to_string('allergy/allergy_list_form.html', context))

    def form_invalid(self, form):
        # 验证失败时返回带错误的表单片段
        return HttpResponse(self.render_to_string('allergy/allergy_form.html', self.get_context_data(form=form)))

核心是：POST成功后必须传入全新的空表单，且返回的模板片段仅包含一次表单。

2. 检查模板的HTMX属性与结构 #

重复表单常因hx-target指向的容器被嵌套渲染导致：

• 确保容器结构清晰，主页面示例：

<div id="allergy-container">
  {% include 'allergy/allergy_list.html' %}
  {% include 'allergy/allergy_form.html' %}
</div>

• 表单的HTMX属性需精准设置：

<!-- allergy_form.html -->
<form hx-post="{% url 'allergy_create' %}" hx-target="#allergy-container" hx-swap="innerHTML">
  {{ form.as_p }}
  <button type="submit">添加过敏原</button>
</form>

hx-swap="innerHTML"会用返回的HTML替换目标容器内容，因此返回的片段不能重复包含#allergy-container标签，只需包含列表和表单本身。

3. 排查模板重复渲染问题 #

检查是否在多处渲染了表单：

• 确认主模板和返回的片段模板没有重复包含表单代码；
• 确保allergy_list_form.html里仅渲染一次空表单，无嵌套冗余。

4. 验证HTMX响应内容 #

用浏览器开发者工具的网络面板查看POST请求的响应：

• 若响应包含两次表单，问题出在视图的模板渲染逻辑；
• 若响应仅含一次表单但页面显示重复，再次确认hx-swap属性（比如是否误设为beforeend而非innerHTML）。

内容的提问来源于stack exchange，提问作者Dr. Ijaz Chaudhry