使用Vanilla JavaScript通过查询字符串传递表单值至另一页面

问题根源 #

你的代码里用了evt.preventDefault()阻止了表单的默认提交行为，导致表单不会跳转到page2.html，自然无法传递参数；另外就算跳转成功，page2.html也没有读取URL查询参数并展示的逻辑。同时，多选框mytoys用get()只能获取第一个选中值，需要用getAll()来获取所有选中项。

修正后的page1.html代码 #

<form action="./page2.html" id="sample-form" method="GET">
  <label for="fullname">全名</label>
  <input type="text" name="fullname">

  <br><br>

  <label for="age">年龄</label>
  <input type="text" name="age">

  <br><br>

  <label for="gender">性别</label>
  <select name="gender" id="gender">
    <option value="Male">男</option>
    <option value="Female">女</option>
    <option value="Other">其他</option>
  </select>

  <br><br>

  <label for="email">邮箱</label>
  <input type="email" name="email" id="email">

  <br><br>

  <label>我的玩具</label>

  <br>

  <input type="checkbox" id="bike" name="mytoys" value="自行车">
  <label for="bike"> 我有自行车</label><br>

  <input type="checkbox" id="car" name="mytoys" value="汽车">
  <label for="car"> 我有汽车</label><br>

  <input type="checkbox" id="boat" name="mytoys" value="船">
  <label for="boat"> 我有船</label><br><br>

  <input type="submit" value="提交">
</form>

<!-- 可选：保留当前页面展示逻辑 -->
<p id="showFullname"></p>
<p id="showAge"></p>
<p id="showGender"></p>
<p id="showEmail"></p>
<p id="favToy"></p>

<script>
  const form = document.getElementById("sample-form");
  form.addEventListener("submit", (evt) => {
    const formData = new FormData(form);
    const params = new URLSearchParams(formData);
    
    // 处理当前页面展示
    const fullname = params.get("fullname");
    const age = params.get("age");
    const gender = params.get("gender");
    const email = params.get("email");
    const mytoys = params.getAll("mytoys").join(", "); // 获取所有选中的玩具
    
    document.getElementById("showFullname").innerHTML = `你的全名是：${fullname}`;
    document.getElementById("showAge").innerHTML = `你的年龄是：${age}`;
    document.getElementById("showGender").innerHTML = `你的性别是：${gender}`;
    document.getElementById("showEmail").innerHTML = `你的邮箱是：${email}`;
    document.getElementById("favToy").innerHTML = `你的玩具是：${mytoys}`;
    
    // 如果不需要当前页面展示，直接用表单默认提交即可；若要手动跳转，取消下面两行注释并删除上面的默认提交逻辑
    // evt.preventDefault();
    // window.location.href = `./page2.html?${params.toString()}`;
  });
</script>

注：修正了checkbox的id重复问题，保证每个checkbox的id与对应label的for属性匹配，符合HTML规范。

page2.html代码（接收并展示参数） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>页面2</title>
</head>
<body>
  <h2>你提交的信息</h2>
  <p id="displayFullname"></p>
  <p id="displayAge"></p>
  <p id="displayGender"></p>
  <p id="displayEmail"></p>
  <p id="displayToys"></p>

  <script>
    // 获取URL中的查询参数
    const urlParams = new URLSearchParams(window.location.search);
    
    // 提取参数值，设置默认值避免空内容
    const fullname = urlParams.get("fullname") || "未填写";
    const age = urlParams.get("age") || "未填写";
    const gender = urlParams.get("gender") || "未选择";
    const email = urlParams.get("email") || "未填写";
    const mytoys = urlParams.getAll("mytoys").join(", ") || "未选择";
    
    // 展示到页面
    document.getElementById("displayFullname").textContent = `全名: ${fullname}`;
    document.getElementById("displayAge").textContent = `年龄: ${age}`;
    document.getElementById("displayGender").textContent = `性别: ${gender}`;
    document.getElementById("displayEmail").textContent = `邮箱: ${email}`;
    document.getElementById("displayToys").textContent = `拥有的玩具: ${mytoys}`;
  </script>
</body>
</html>

关键要点 #

• 移除evt.preventDefault()或手动执行页面跳转，确保表单数据能通过URL参数传递到page2。
• 多选框必须用getAll()获取所有选中值，避免只拿到第一个选中项。
• page2通过window.location.search获取URL中的查询字符串，再用URLSearchParams解析提取参数。
• 保证checkbox的id唯一性，让label与input正确关联。

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