HTML表单内不同功能按钮均触发表单提交的问题排查

代码共有3处导致跳转失效的错误：

• 表单内的<button>标签如果不手动指定type属性，默认值为submit，点击后会自动触发所在表单的提交逻辑。你写的「注册」「忘记密码」两个按钮都没有设置type属性，点击后会直接把表单提交到login.php，跳转逻辑还没执行就被页面提交刷新打断了。
• JavaScript函数重名。两个跳转函数都被命名为myFunction1，JS中后定义的同名函数会直接覆盖前面的定义，就算解决了表单默认提交的问题，两个按钮点击后也都会跳转到忘记密码页面，注册页跳转逻辑完全失效。
• 点击事件没有拦截默认行为，没有明确告知浏览器这两个按钮不需要关联表单提交操作，进一步导致提交优先级高于跳转。

按以下两点修改即可恢复正常：

1. 给两个非登录提交的按钮加上type="button"属性，明确告知浏览器这两个按钮不触发表单提交，修改后的按钮代码如下：

<button id="buton1" type="submit">Log in</button>
<button id="buton2" type="button" onclick="myFunction1()">Register</button>
<button id="buton3" type="button" onclick="myFunction2()">Forgot password?</button>

2. 把重名的跳转函数改成不同的函数名，和按钮onclick里绑定的函数名对应上，修改后的JS代码如下：

function myFunction1() {
    location.href='registerPage.php';
}
function myFunction2() {
    location.href='forgotPasswordPage.php';
}

改完之后，登录按钮会正常提交表单，另外两个按钮会分别跳转到注册页和忘记密码页，不会再触发表单提交。

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