Django中Jquery动态增减表单字段的提交与删除问题

问题1：新增字段数据未提交 #

核心原因 #

动态添加的表单字段name属性未采用数组格式，后端无法识别并接收多个同名字段的值；或者字段未正确插入到<form>标签内部。

修复步骤 #

1. 统一字段命名格式：所有同类型的动态字段name使用数组语法，确保后端能批量接收

   <!-- 原始字段组示例 -->
   <div class="field-group">
     <input type="text" name="phone[]" placeholder="电话">
     <input type="text" name="email[]" placeholder="邮箱">
     <input type="text" name="address[]" placeholder="地址">
   </div>
   

2. 动态追加字段时保持一致命名：

   $('.add-btn').click(function() {
     const newGroup = `
       <div class="field-group">
         <input type="text" name="phone[]" placeholder="电话">
         <input type="text" name="email[]" placeholder="邮箱">
         <input type="text" name="address[]" placeholder="地址">
         <button type="button" class="remove-btn">删除</button>
       </div>
     `;
     $('#form-container').append(newGroup);
   });
   

3. 后端批量接收参数（以Django为例）：

   # views.py
   def contact(request):
       if request.method == 'POST':
           phones = request.POST.getlist('phone[]')
           emails = request.POST.getlist('email[]')
           addresses = request.POST.getlist('address[]')
           # 遍历处理每组数据
           for p, e, a in zip(phones, emails, addresses):
               Contact.objects.create(phone=p, email=e, address=a)
       return render(request, 'contact.html')
   

问题2：删除按钮只能删除单个字段 #

核心原因 #

删除事件绑定到了单个输入元素，而非包含三个字段的父容器，导致点击时仅移除当前元素。

修复步骤 #

1. 字段组统一容器包裹：把每组三个字段放进带field-group类的<div>中，删除按钮置于容器内
2. 用事件委托绑定删除逻辑（动态元素无法直接绑定事件）：

   $(document).on('click', '.remove-btn', function() {
       // 移除当前按钮所在的整个字段组容器
       $(this).closest('.field-group').remove();
   });
   

3. 原始字段组同步结构：

   <form method="post">
     {% csrf_token %}
     <div id="form-container">
       <div class="field-group">
         <input type="text" name="phone[]" placeholder="电话">
         <input type="text" name="email[]" placeholder="邮箱">
         <input type="text" name="address[]" placeholder="地址">
         <button type="button" class="remove-btn">删除</button>
       </div>
     </div>
     <button type="button" class="add-btn">添加字段组</button>
     <button type="submit">提交</button>
   </form>
   

额外提示 #

如果使用Django开发，推荐直接用内置的formset功能实现动态字段，无需手动编写jQuery逻辑，更贴合框架规范：

# forms.py
from django.forms import formset_factory
from .models import Contact

ContactForm = modelform_factory(Contact, fields=['phone', 'email', 'address'])
ContactFormSet = formset_factory(ContactForm, extra=1)

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