使用JavaScript如何正确获取表单中多个input输入框的内容？

问题根源 #

你当前的写法错误使用了document.querySelector()方法：
querySelector()仅接收1个选择器参数，你传入的第二个及之后的选择器会被直接忽略，所以代码实际只匹配到了第一个ID为#name的输入框，自然拿不到其他字段的值。

解决方法 #

方法1：分别声明变量获取每个输入框（适合需要单独操作各字段的场景） #

把原来的const userInput = document.querySelector("#name", "#surname", "#age", "#country");行替换为分别获取的代码：

const nameInput = document.querySelector("#name");
const surnameInput = document.querySelector("#surname");
const ageInput = document.querySelector("#age");
const countryInput = document.querySelector("#country");

表单提交时直接取值即可：

form.addEventListener('submit', function(e) {
  e.preventDefault();
  // 获取各字段值
  const name = nameInput.value.trim();
  const surname = surnameInput.value.trim();
  const age = ageInput.value.trim();
  const country = countryInput.value.trim();

  // 此处补充你自己的展示逻辑，比如拼接后插入userList
  // ...
})

方法2：用FormData直接读取整个表单（更简洁，适合表单字段多的场景） #

不用单独获取每个输入框，绑定表单提交事件后直接实例化FormData即可批量读取所有值：

form.addEventListener('submit', function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  // 直接通过input的name属性取值
  const name = formData.get('name');
  const surname = formData.get('surname');
  const age = formData.get('age');
  const country = formData.get('country');

  // 展示逻辑示例：拼接成DOM节点插入列表
  const userItem = document.createElement('li');
  userItem.className = 'list-group-item';
  userItem.textContent = `${name} ${surname}，年龄：${age}，国家：${country}`;
  userList.appendChild(userItem);

  // 可选：提交后清空表单
  this.reset();
})

补充：批量选中所有输入框 #

如果你需要一次性选中所有输入框做统一校验、清空等操作，可以使用querySelectorAll，注意多个选择器要写到同一个字符串里，用逗号分隔：

const allInputs = document.querySelectorAll("#name, #surname, #age, #country");
// 遍历取值示例
const userValues = {};
allInputs.forEach(input => {
  userValues[input.name] = input.value.trim();
})

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