JS拼接URL跳转时输入内容后按钮点击无响应问题

异常现象 #

• 输入框填写文本内容时，点击按钮无响应，跳转逻辑无法触发
• 输入框为空时，点击按钮可正常跳转到未拼接参数的基础目标URL

异常代码片段 #

异常HTML结构 #

<div class="pen-title">
  <div class="container">
    <div class="card"></div>
    <div class="card">
      <form>
        <div class="input-container">
          <input type="#{type}" id="txt" required="required"/>
          <label for="#{label}">Password</label>
          <div class="bar"></div>
        </div>
        <div class="button-container">
          <button id="btn"><span>Go</span></button>
        </div>
      </form>
    </div>
  </div>
</div>

对应JS逻辑 #

var nickname = document.getElementById("txt");
function redirect () {
  window.location.href = "目标地址?info=" + nickname.value;
};
document.getElementById("btn").addEventListener('click', redirect);

正常运行参考代码 #

同核心逻辑在以下结构中运行无异常，仅CSS布局样式存在差异：

<div class ="input"> 
  <input type="text" id="txt" />
  <label for="txt"> Enter Reg </label> 
</div>
<div class="buttons">
  <button class="pulse" id="btn">Pulse</button>
</div>
<script>
var nickname = document.getElementById("txt");
function redirect () {
  window.location.href = "目标地址?car-reg=" + nickname.value;
};
document.getElementById("btn").addEventListener('click', redirect);
</script>

故障原因 #

按钮放在<form>标签内部且未指定type属性时，浏览器默认将其识别为type="submit"的提交按钮：

1. 输入框为空时，输入框的required="required"校验不通过，浏览器会拦截表单默认提交动作，绑定的自定义跳转JS逻辑可以正常执行，因此能跳转到无参数的基础URL
2. 输入框有内容时，表单校验通过，点击按钮会触发原生表单提交逻辑（当前form未配置action，默认提交到当前页面触发刷新），该行为会中断自定义的JS跳转逻辑，因此表现为点击无响应

修复方案 #

任选以下一种方案即可修复：

• 方案1：给按钮显式添加type="button"属性，让按钮不再触发表单默认提交行为，修改后按钮代码：

<button id="btn" type="button"><span>Go</span></button>

• 方案2：在点击事件回调中阻止默认提交行为，同时建议对输入内容做URL编码避免特殊字符异常，修改后JS代码：

var nickname = document.getElementById("txt");
function redirect (e) {
  e.preventDefault();
  window.location.href = "目标地址?info=" + encodeURIComponent(nickname.value);
};
document.getElementById("btn").addEventListener('click', redirect);

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