在单个视图中实现含用户输入的多Child模型注册功能

核心逻辑 #

通过前端JS监听「是否添加另一条记录」的单选按钮状态，动态克隆插入相同的表单组，最后一次性提交所有表单数据。

1. HTML基础结构 #

<form id="childForm" method="POST" action="/submit-children">
  <!-- 初始子表单组 -->
  <div class="child-group">
    <div>
      <label>姓名：</label>
      <input type="text" name="children[0][full_name]" required>
    </div>
    <div>
      <label>名字：</label>
      <input type="text" name="children[0][first_name]" required>
    </div>
  </div>

  <!-- 单选按钮组 -->
  <div class="add-more-group">
    <label>是否需要添加另一条记录？</label>
    <input type="radio" name="add_more" value="yes" id="addYes">
    <label for="addYes">是</label>
    <input type="radio" name="add_more" value="no" id="addNo" checked>
    <label for="addNo">否</label>
  </div>

  <button type="submit">提交表单</button>
</form>

2. JavaScript动态添加逻辑 #

const form = document.getElementById('childForm');
const addYesRadio = document.getElementById('addYes');
const addNoRadio = document.getElementById('addNo');

// 监听单选按钮切换事件
addYesRadio.addEventListener('change', function() {
  if (this.checked) {
    // 统计现有子表单组数量
    const groupCount = document.querySelectorAll('.child-group').length;
    // 克隆初始表单组
    const newGroup = document.querySelector('.child-group').cloneNode(true);
    
    // 更新新表单的name属性索引，方便后端识别
    newGroup.querySelectorAll('input').forEach(input => {
      input.name = input.name.replace(/\[0\]/, `[${groupCount}]`);
      // 清空克隆后的输入框内容
      input.value = '';
    });
    
    // 将新表单组插入到单选按钮区域上方
    form.insertBefore(newGroup, document.querySelector('.add-more-group'));
    // 自动切回「否」选项，防止重复触发添加
    addNoRadio.checked = true;
  }
});

3. 后端接收说明 #

后端可通过数组形式批量接收数据：

• PHP中直接获取$_POST['children']，得到包含所有子项数据的数组
• Python Django中使用request.POST.getlist('children')，每个元素对应一条子记录的字段集合
• 拿到数据后直接批量写入Child模型即可

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