如何使用JavaScript提取表单选中信息并生成键值对字典

你的原有实现直接通过FormData序列化整个表单，默认会采集所有带name属性的表单控件的值，无论控件是否隐藏，因此会把display: none区域的输入内容也加入结果，不符合需求。

1. 先定义可见性判断函数，识别出所有处于显示状态的表单控件
2. 遍历表单内所有有效控件，跳过无name、禁用、隐藏的控件
3. 按控件类型提取对应值，处理同name多值的场景，最终组装为键值对字典

// 判定元素是否可见（元素本身及所有父级都没有display:none才判定为可见）
function isElementVisible(el) {
  return !!(el.offsetParent && window.getComputedStyle(el).display !== 'none');
}

// 仅采集可见区域的表单数据
const getVisibleFormData = () => {
  // 匹配你给出的表单类名
  const form = document.querySelector('.tool-form');
  const result = {};
  // 选中所有表单控件
  const formControls = form.querySelectorAll('input, select, textarea');

  formControls.forEach(control => {
    // 跳过无name、禁用、隐藏的控件
    if (!control.name || control.disabled || !isElementVisible(control)) {
      return;
    }

    const key = control.name;
    let value;

    // 按控件类型取值
    switch (control.type) {
      case 'checkbox':
        value = control.checked ? (control.value || true) : undefined;
        break;
      case 'radio':
        value = control.checked ? control.value : undefined;
        break;
      case 'file':
        value = control.multiple ? Array.from(control.files) : control.files[0];
        break;
      default:
        value = control.value;
    }

    // 跳过空值可开启下面的判断，不需要就注释
    // if (value === undefined || value === null || value === '') return;

    // 处理同name多值场景
    if (Object.hasOwn(result, key)) {
      if (!Array.isArray(result[key])) {
        result[key] = [result[key]];
      }
      result[key].push(value);
    } else {
      result[key] = value;
    }
  });

  return result;
};

// 绑定提交事件
const submitBtn = document.getElementById('submit');
submitBtn.addEventListener('click', (event) => {
  event.preventDefault();
  const formData = getVisibleFormData();
  // 纯文本内容可直接序列化，包含文件请使用FormData实例提交
  const json = JSON.stringify(formData);
  console.log(json);
  // 后续业务逻辑处理
});

• 原有代码的表单选择器.Galaxy-form和你提供的表单类名.tool-form不一致，已在代码中修正
• 如需上传文件，不要直接JSON序列化结果，可将收集到的键值对塞入FormData实例后再提交给后端
• 可根据业务需求调整是否要过滤空字符串的输入值，代码中已标注对应调整位置
• 如果需要兼容旧版浏览器，可将Object.hasOwn替换为Object.prototype.hasOwnProperty.call即可

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