如何在JavaScript中将表单字段值传递并附加到下一页URL？

看起来你已经搭好了基础的输入框和值更新函数，不过还缺了提交时拼接URL并跳转的关键逻辑，我来帮你完善整个实现：

完整代码实现 #

1. 完善表单结构 #

首先把输入框包裹在表单标签里，加上提交按钮，用onsubmit事件来处理跳转逻辑（避免页面默认刷新）：

<form id="nameForm" onsubmit="handleSubmit(event)">
  <label for="first_name">First Name</label>
  <input id="first_name" name="first_name" type="text">
  <button type="submit">Go to Next Page</button>
</form>

2. 提交逻辑脚本 #

这里我帮你简化了代码，不用单独维护update()函数，直接在提交时获取最新输入值，同时处理URL编码和跳转：

function handleSubmit(e) {
  // 阻止表单默认的刷新提交行为
  e.preventDefault();
  
  // 获取输入框的最新值，去除首尾空格
  const firstName = document.getElementById('first_name').value.trim();
  
  // 可选：校验输入是否为空
  if (!firstName) {
    alert('请输入你的名字哦！');
    return;
  }
  
  // 拼接下一页URL，用encodeURIComponent编码特殊字符（比如空格、&）
  const nextPageUrl = `next.html?first_name=${encodeURIComponent(firstName)}`;
  
  // 跳转到拼接好的下一页
  window.location.href = nextPageUrl;
}

3. 关键细节说明 #

• URL编码很重要：用encodeURIComponent()处理输入值，能避免空格、特殊符号（比如&、#）破坏URL结构，保证参数传递正确。
• 如果你还是想保留原来的update()函数，也可以调整脚本，但其实直接在提交时获取值更简洁，减少变量维护的麻烦。

4. 下一页获取参数的方法（可选） #

如果需要在下一页（比如next.html）读取URL里的名字参数，可以用这段代码：

// 解析URL查询参数
const urlParams = new URLSearchParams(window.location.search);
const firstName = urlParams.get('first_name');

// 示例：把名字显示在页面上
if (firstName) {
  document.getElementById('greeting').textContent = `Hello, ${decodeURIComponent(firstName)}!`;
}

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