前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >submit方法与onsubmit事件

submit方法与onsubmit事件

作者头像
跑马溜溜的球
发布2020-12-07 15:29:05
2.7K0
发布2020-12-07 15:29:05
举报
文章被收录于专栏:日积月累1024

一.form的submit方法是否会触发onsubmit事件?

测试代码如下:

代码语言:javascript
复制
<html>
    <head>
        <meta content="text/html; charset=gb2312" http-equiv="Content-Type">
    </head>
    <form id='myform' target="_top" action="http://www.soso.com/q">
        <input type="text" name="w" value="ball"/><input type="submit" value="搜索" />
    </form>
	
	<script>
		var obj = document.getElementById('myform');
		obj.onsubmit = function(){
			alert('check');
			return true;
		}
		obj.submit();
	</script>
</hmtl>

结果是,我们不会看到'check'的弹出框,所以结论是:

submit()方法不会触发onsubmit事件。

二. 如何阻止表单的提交

经常我们的提交表单前都会用js对表单内容作验证,如果有问题,则不希望提单表单。那么,如果阻止表单提交呢?

取决于你用什么方式给表单加入onsubmit事件。

1.dom0方式绑定

代码语言:javascript
复制
<script>
	var obj = document.getElementById('myform');
	var check = function(){
		if ('error'){//验证出错的情况just a demo
			return false;
		}else{
			return true;
		}
	}
		
	obj.onsubmit = function(){
		return check();
	}
</script>

用这种方式绑定onsubmit事件,表单能否提交取决于onsubmit函数的返回值。false时,表单不会提交。

2.用dom2方式绑定(addEventListener)

看下面这段代码:

代码语言:javascript
复制
<script>
        var obj = document.getElementById('myform');
        var check = function(){
            if ('error') {//验证出错的情况just a demo
                return false;
            }
            else {
                return true;
            }
        }
        
        function addListener(element, type, handler){
            if (!element) {
                return;
            }
            if (element.addEventListener) {
                element.addEventListener(type, handler, false);
            }
            else {//for ie
                element.attachEvent("on" + type, handler);
            }
	}

 	addListener(obj, 'submit', check);
</script>

你会发现,IE下,可以正常阻止表单提单,但FF及chrome下表单正常提交了...

原因: ECMAScript Language Binding写明:

addEventListener(type, listener, useCapture) The listener parameter is a EventListener object.

Object EventListener:This is an ECMAScript function reference. This method has no return value. The parameter is a Event object.

可见,listener是没有返回值的(写了也不会认),因此我们的check函数的返回值是不起作用的。

解决方式:

代码语言:javascript
复制
<script>
function check(ev) {
	if ('error') {//验证出错的情况just a demo
		ev = ev || window.event; // Event对象
	    	if (ev.preventDefault) { // 标准浏览器
	        		ev.preventDefault();
	    	} else { // IE浏览器
	        		window.event.returnValue = false;
	    	}
	}
}
</script>

三.如何用代码触发onsumbit

这也取决于你用何种方式绑定onsubmit事件

1.dom0方式绑定(参见二.1)

这时直接调用onsumit方法即可,根据onsubmit()的返回值决定是否触发submit。

代码语言:javascript
复制
<script>
if (obj.onsubmit() != false){
	obj.submit();
}
</script>

2.dom2方式绑定(参见二.2)

代码语言:javascript
复制
<script>
if (obj.fireEvent) {//for ie
	if (obj.fireEvent('onsubmit')){
		obj.submit();
	}	
}
else if (document.createEvent){
	var ev = document.createEvent('HTMLEvents');
	ev.initEvent('submit', false, true);
	obj.dispatchEvent(ev);
}
</script>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2012/05/29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档