如何用HTMX和Django实现嵌套动态表单一键提交？

下面提供几种无需依赖表单唯一标识的实操方案，覆盖前端数据收集和后端处理逻辑：

方案一：前端统一收集所有表单数据，打包发送到后端 #

前端处理（基于jQuery） #

移除所有子表单的提交按钮，仅保留主页面的提交按钮，通过遍历DOM收集所有表单数据：

// 绑定主提交按钮点击事件
$('#main-submit-btn').click(function(e) {
    e.preventDefault();
    let allFormData = [];

    // 遍历页面中所有表单（包括动态添加的）
    $('form').each(function(formIndex) {
        // 序列化当前表单的键值对
        let formFields = $(this).serializeArray();
        // 给当前表单数据添加索引标识，方便后端区分
        formFields.push({name: "form_seq", value: formIndex + 1});
        allFormData.push(formFields);
    });

    // 发送JSON格式数据到后端
    $.ajax({
        url: "/submit-all",
        method: "POST",
        data: JSON.stringify(allFormData),
        contentType: "application/json",
        success: function(res) {
            alert("所有表单提交完成");
            // 后续处理如页面刷新、提示等
        },
        error: function(err) {
            console.error("提交失败：", err);
        }
    });
});

如果担心字段名重复，可在动态添加表单时，给字段名加上数组后缀（如username[]），后端直接接收为列表即可。

后端视图函数（以Django为例） #

接收前端传来的JSON数据，逐个验证并处理表单：

from django.http import JsonResponse
import json

def submit_all(request):
    if request.method != "POST":
        return JsonResponse({"status": "fail", "msg": "仅支持POST请求"}, status=400)
    
    try:
        all_data = json.loads(request.body)
        for form_seq, form_fields in enumerate(all_data, 1):
            # 把序列化的数组转成字典，方便验证
            form_dict = {item["name"]: item["value"] for item in form_fields}
            # 这里替换成你的表单验证逻辑
            # 示例：用Django Form验证
            # from .forms import YourForm
            # form = YourForm(form_dict)
            # if not form.is_valid():
            #     return JsonResponse({"status": "fail", "msg": f"第{form_seq}个表单验证失败", "errors": form.errors}, status=400)
            # form.save()
        
        return JsonResponse({"status": "success", "msg": "所有表单提交成功"})
    except Exception as e:
        return JsonResponse({"status": "fail", "msg": f"服务器错误：{str(e)}"}, status=500)

方案二：合并所有表单为一个主表单 #

如果不需要保留子表单独立的<form>标签，直接把所有动态添加的字段放入主页面的单个<form>中：

• 前端操作：移除所有子表单的<form>标签，动态添加的字段直接插入主表单内，字段名使用数组格式（如email[]）
• 后端处理：直接通过request.POST.getlist("email")获取所有动态添加的邮箱值，批量处理即可

方案三：动态生成表单唯一标识（补全jQuery方案） #

如果必须保留子表单的<form>标签，可在动态添加时自动生成唯一ID：

let formCounter = 0;
// 动态添加表单的函数
$("#add-form-btn").click(function() {
    formCounter++;
    // 克隆模板表单并设置唯一ID
    let newForm = $("#template-form").clone().attr("id", `dynamic-form-${formCounter}`);
    $("#form-container").append(newForm);
});

// 提交时遍历带唯一ID的表单
$("#main-submit-btn").click(function(e) {
    e.preventDefault();
    let allData = {};
    $("form[id^='dynamic-form-']").each(function() {
        let formId = $(this).attr("id");
        allData[formId] = $(this).serialize();
    });
    // 发送请求逻辑同方案一
});

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