JavaScript表单提交前遍历多维元素，如何获取attributo[]中的索引值

嘿，我明白你的问题了——你需要在表单提交前用JavaScript遍历那些带方括号索引的表单元素（比如attributo[7]），提取出里面的数字索引，还得确保提交到destination_page.php后能得到规整的结构化数组对吧？我来给你拆解一下具体怎么做。

首先，你可以通过属性选择器选中所有name属性以attributo[开头的表单元素，然后用正则表达式精准捕获方括号里的数字索引。代码示例如下：

// 选中所有name包含attributo[的输入/选择/文本域元素
const attrElements = document.querySelectorAll(
  'input[name^="attributo["], select[name^="attributo["], textarea[name^="attributo["]'
);

attrElements.forEach(element => {
  // 用正则匹配attributo[数字]的格式，捕获组提取数字
  const indexMatch = element.name.match(/attributo\[(\d+)\]/);
  if (indexMatch) {
    const itemIndex = indexMatch[1]; // 这里就是你要的7、8这类索引值
    console.log(`当前元素的索引是：${itemIndex}`);
    
    // 在这里可以做你需要的逻辑，比如验证值、修改元素属性等
  }
});

小提示：如果你的元素是多维结构（比如attributo[7][nome]），可以把正则改成/attributo\[(\d+)\]\[(\w+)\]/，这样还能同时提取出后面的字段名（比如nome）。

重点提醒：只要你的表单元素name属性遵循attributo[索引][字段名]的格式，PHP会自动将$_POST中的数据解析成多维数组，完全不需要额外的后端处理！

举个例子，假设你的表单有这些元素：

<input type="text" name="attributo[7][nome]" value="尺寸">
<input type="text" name="attributo[7][valore]" value="XL">
<input type="text" name="attributo[8][nome]" value="颜色">
<input type="text" name="attributo[8][valore]" value="黑色">

那么在destination_page.php中，$_POST['attributo']会直接是这样的结构化数组：

Array
(
    [7] => Array
        (
            [nome] => 尺寸
            [valore] => XL
        )

    [8] => Array
        (
            [nome] => 颜色
            [valore] => 黑色
        )
)

如果你需要在提交前对数据做验证、重组或者其他自定义操作，可以监听表单的submit事件，先阻止默认提交，处理完再手动提交：

const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
  // 先阻止默认提交行为
  e.preventDefault();
  
  // 初始化一个空对象来存储结构化数据
  const structuredAttrs = {};
  
  // 遍历所有目标元素
  const attrElements = this.querySelectorAll('input[name^="attributo["]');
  attrElements.forEach(element => {
    const fullMatch = element.name.match(/attributo\[(\d+)\]\[(\w+)\]/);
    if (fullMatch) {
      const index = fullMatch[1];
      const field = fullMatch[2];
      
      // 构建结构化对象
      if (!structuredAttrs[index]) {
        structuredAttrs[index] = {};
      }
      structuredAttrs[index][field] = element.value;
    }
  });
  
  // 这里可以添加验证逻辑，比如检查每个索引下的字段是否完整
  const isValid = Object.values(structuredAttrs).every(item => item.nome && item.valore);
  
  if (isValid) {
    // 验证通过，手动提交表单
    this.submit();
    
    // 或者如果你想用AJAX提交JSON数据：
    // fetch('destination_page.php', {
    //   method: 'POST',
    //   headers: { 'Content-Type': 'application/json' },
    //   body: JSON.stringify(structuredAttrs)
    // }).then(res => res.json()).then(data => console.log(data));
  } else {
    alert('请填写完整所有属性信息！');
  }
});

这样你既能轻松拿到每个元素的索引值，又能保证提交到PHP后的数据结构完全符合预期。

内容的提问来源于stack exchange，提问作者Giuseppe Lodi Rizzini