如何按div分组提交表单 获取指定嵌套数组格式的提交数据

你现有代码无法实现分组效果的核心原因是：原生表单提交时，会把所有同name属性的输入项按DOM出现顺序平铺拼接，不会自动按DOM层级做分组，因此无法生成你需要的二维part_name结构。以下是两种可直接落地的实现方式：

方案1：修改input的name属性（无额外JS，原生提交即可生效） #

利用后端语言通用支持的表单数组命名规则，直接给每个分组指定明确的索引值，提交后后端会自动解析成你需要的嵌套结构，不需要额外做数据处理。
调整后的表单代码如下：

<div>
  <!-- 第1组，索引为0 -->
  <div>
    <input name="item_name[0]">
    <input name="part_name[0][]">
  </div>
  <div>
    <input name="part_name[0][]">
  </div>
</div>
<div>
  <!-- 第2组，索引为1 -->
  <div>
    <input name="item_name[1]">
    <input name="part_name[1][]">
  </div>
  <div>
    <input name="part_name[1][]">
  </div>
</div>

如果你的表单支持动态增删分组，只需要在新增/删除分组的逻辑里，同步更新每个分组下所有输入框name里的索引值即可。

方案2：保留原有DOM结构，JS拦截提交手动组装数据 #

如果现有DOM结构已经绑定了其他业务逻辑、不方便修改name属性，可以拦截表单的默认提交行为，手动遍历外层分组DOM，组装出目标结构后再通过AJAX提交。
参考实现代码：

// 替换成你实际的表单元素选择器
const targetForm = document.querySelector('form');

targetForm.addEventListener('submit', function(e) {
  // 阻止原生表单提交
  e.preventDefault();
  const submitData = new FormData();
  // 选中所有作为分组容器的外层div，替换成你实际的分组选择器
  const groupList = targetForm.querySelectorAll(':scope > div');

  groupList.forEach((groupEl, groupIndex) => {
    // 组装当前分组的item值
    const itemEl = groupEl.querySelector('input[name="item[]"]');
    if (itemEl) {
      submitData.append(`item_name[${groupIndex}]`, itemEl.value);
    }
    // 组装当前分组下的所有part值
    const partElList = groupEl.querySelectorAll('input[name="part[]"]');
    partElList.forEach(partEl => {
      submitData.append(`part_name[${groupIndex}][]`, partEl.value);
    })
  })

  // 调用接口提交submitData即可，以下是fetch提交示例
  // fetch('/your-api-path', {
  //   method: 'POST',
  //   body: submitData
  // })
})

方案选择建议 #

• 静态表单、或动态增删逻辑调整成本低的场景，优先选方案1，无额外JS开销，兼容性最好
• 现有DOM逻辑耦合度高、不方便修改属性的场景，选方案2，灵活度更高

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