使用FormData转表单为JSON时触发TypeError，表单结构无明显异常

这个错误和单选按钮完全无关，核心原因是你传给FormData的参数根本不是有效的<form>元素，大概率是获取表单的代码出错，或者JS执行时机不对。

常见问题点及解决方法 #

• 选择器错误：检查你获取表单的代码，比如document.getElementById('formId')里的ID是否和表单标签的id完全一致，或者querySelector的选择器有没有误选到非表单元素（比如div）。
• DOM未加载完成就执行JS：如果你的JS代码写在<head>里，或者页面还没渲染完就运行，获取表单的结果会是null，传给FormData自然报错。解决方法是把JS代码放在</body>标签前，或者用DOMContentLoaded事件包裹：

  document.addEventListener('DOMContentLoaded', function() {
    // 这里写获取表单和转换的代码
  });
  

• 传错了元素：确认你传给FormData的变量确实指向<form>标签，而非某个input、div或其他元素。可以加console.log(formElement)查看输出，如果是null或非HTMLFormElement类型，就说明找错了目标。

正确示例代码 #

<form id="myForm">
  <input type="text" name="username" placeholder="用户名">
  <input type="radio" name="gender" value="male">男
  <input type="radio" name="gender" value="female">女
  <button type="button" onclick="formToJson()">转JSON</button>
</form>

<script>
function formToJson() {
  // 正确获取表单元素
  const form = document.getElementById('myForm');
  // 先判断表单是否存在
  if (!form) {
    console.error('找不到表单元素');
    return;
  }
  const formData = new FormData(form);
  const json = {};
  // 遍历FormData转成JSON
  formData.forEach((val, key) => {
    json[key] = val;
  });
  console.log(json);
}
</script>

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