使用JS实现表单提交跳转时无法跳转至本站子页面问题求助

问题排查及修复方案 #

• 问题1：HTML中input标签语法错误未闭合，会导致DOM解析异常，目标元素获取可能失效
• 问题2：未阻止表单的默认提交行为，表单触发onsubmit后会默认重载当前页面，跳转逻辑会被页面重载中断，这是跳转本站页面失效的核心原因
• 问题3：window.location.href赋值后执行alert会阻塞跳转逻辑，且myInput变量未声明可能在严格模式下报错

修复后的JS代码 #

function myFormSubmit(e) {
  // 阻止表单默认提交刷新行为
  e.preventDefault();
  const myInput = document.getElementById('number');
  
  if(myInput.value == 1) {
    alert(1);
    // 同站跳转可直接用相对路径，避免域名硬编码后续维护问题
    window.location.href = '/tradeups/9324ec1';
  }
}

修复后的HTML代码 #

<div class="Searchbox">
  <!-- 提交事件中传入事件对象event -->
  <form onsubmit="myFormSubmit(event)">
    <!-- 补全input闭合标签 -->
    <input type="number" class="input" placeholder="What is your budget?" min="0" id="number">
  </form>
</div>

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