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();
    }
}
原文地址:https://www.cnblogs.com/yeduweichengzhaoyu/p/11905501.html