HTML表单提交后如何跳转至新标签页并将输入值带入目标URL

实现方案 #

因为你需要的拼接内容在URL的hash（#）部分，浏览器默认表单提交不会把参数带入hash位，所以需要加少量JS逻辑拦截提交行为实现需求，修改后的完整代码如下：

<form action="https://test.test.com/" target="_blank" id="trackForm">
  <fieldset>
    <legend>bftl</legend>
    <input type="text" name="trackTrace" id="trackTrace" placeholder="Add your Track & Trace">
    <!-- 修正原label的for属性，和输入框id匹配，符合无障碍访问要求 -->
    <label for="trackTrace">Track & Trace</label>
    <input type="submit" class="submit" value="Submit">
  </fieldset>
</form>

<script>
document.getElementById('trackForm').addEventListener('submit', function(e) {
  // 阻止表单默认提交行为
  e.preventDefault()
  // 取输入值并去除首尾空格
  const trackNum = document.getElementById('trackTrace').value.trim()
  // 非空校验，可根据需求调整
  if (!trackNum) {
    alert('请输入有效的Track & Trace编号')
    return
  }
  // 按要求拼接URL，对输入内容编码避免特殊字符破坏URL结构
  const targetUrl = `https://test.test.com/#/${encodeURIComponent(trackNum)}`
  // 新标签页打开
  window.open(targetUrl, '_blank')
})
</script>

核心修改点 #

• 给form标签新增target="_blank"属性，确保跳转在新标签页触发，新增id方便JS获取元素
• 拦截表单默认提交逻辑，避免默认GET请求把参数放到?后面的查询字符串里
• 按规则拼接hash路由格式的目标URL，增加输入校验和编码兼容逻辑

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