表单填写后按钮点击未触发window.location.replace跳转问题咨询

问题成因 #

你的按钮应该嵌套在<form>标签内（虽然你提供的HTML片段未展示完整结构）。当填写完符合验证规则的内容后，点击按钮会触发表单默认的提交行为——浏览器会自动刷新页面，直接打断了window.location.replace()的跳转逻辑。而未填写内容时，input的required验证失败，浏览器阻止了表单提交，所以你的JS跳转代码能正常执行。

解决方法 #

方法1：阻止按钮点击的默认行为 #

修改JS函数，添加事件参数并调用preventDefault()来阻断表单提交：

function register(e) {
  // 阻止浏览器默认的表单提交行为
  e.preventDefault();
  
  var email = document.getElementById("emailData2").value;
  var password = document.getElementById("passwordData2").value;
  
  localStorage.setItem("localemail", email);
  localStorage.setItem("localpassword", password);
  
  window.location.replace("https://accountdemo.netlify.app");
}

document.getElementById("registerButton").addEventListener("click", register);

方法2：将按钮设置为非提交类型 #

给按钮添加type="button"属性，让浏览器不再将其识别为表单提交按钮：

<button id="registerButton" type="button">Sign Up</button>

方法3：监听表单的submit事件（推荐，若使用form标签） #

如果输入框确实包裹在<form>中，更规范的做法是监听表单的submit事件，同样阻止默认行为：

// 假设你的form标签id为registerForm
document.getElementById("registerForm").addEventListener("submit", function(e) {
  e.preventDefault();
  
  var email = document.getElementById("emailData2").value;
  var password = document.getElementById("passwordData2").value;
  
  localStorage.setItem("localemail", email);
  localStorage.setItem("localpassword", password);
  
  window.location.replace("https://accountdemo.netlify.app");
});

此时按钮可保留type="submit"（默认即为该类型，也可显式声明）。

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