form表单提交事件
1.onsubmit属性。如果设置form表单的onsubmit='return false',这个form表单用submit按钮是无法提交的。
<form onsubmit="return false" action="/doaction" id="myForm" method="post"> <input type="text"> <input type="text"> <button type="submit">提交</button> </form>
return false:阻止了元素本身默认事件,阻止了冒泡。
2.html.submit()表单提交。
<form onsubmit="return false" action="/doaction" id="myForm" method="post"> <input type="text"> <input type="text"> <button onclick="login()">提交</button> </form> <script> function login () { document.getElementById('myForm').submit() } <script>
这个方法可以忽略return false,参考链接解释:https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLFormElement/submit
这时候表单可以提交。
遇到的问题,当监听回车事件时,会发现出现两次请求,第一次请求被很快canceled,需要在回车方法中把form表单的默认方法再一次禁掉。
function keyLogin(evt) {
evt = (evt) ? evt : ((window.event) ? window.event : "");
var key = evt.keyCode?evt.keyCode:evt.which;
if(key == 13){
evt.preventDefault();
login();
}
}