一.form的submit方法是否会触发onsubmit事件?
测试代码如下:
<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方式绑定
<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)
看下面这段代码:
<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下表单正常提交了...
原因:
ECMAScriptLanguageBinding写明:
addEventListener(type,listener,useCapture)
ThelistenerparameterisaEventListenerobject.
ObjectEventListener:ThisisanECMAScriptfunctionreference.Thismethodhasnoreturnvalue.TheparameterisaEventobject.
可见,listener是没有返回值的(写了也不会认),因此我们的check函数的返回值是不起作用的。
解决方式:
<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。
<script>
if (obj.onsubmit() != false){
obj.submit();
}
</script>
2.dom2方式绑定(参见二.2)
<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>
分享到:
相关推荐
表单元素拥有submit方法,同时也具有onsubmit事件句柄,用于监听表单提交。可以使用elemForm.submit();方法触发表单提交。1、表单元素中出现了name=”submit”的元素这种情况下elemForm.submit();将不会触发表单提交...
submit表单提交,onsubmit验证拦截 免去了用button按钮click点击事件ajax请求
本文实例讲述了JS定义网页表单提交(submit)的方法。分享给大家供大家参考。具体如下: 这段代码表示网页表单提交时不是提交到指定的页面,而是执行一个特定的函数 [removed] function saveInfo() { localStorage...
当用JS调用form的方法submit直接提交form的时候,submit事件不响应。为什么?知道的请回复。类比一下,我用input.select()做了测试,却能响应select事件。这个原因先放一边,我们看看先怎么把眼下的问题解决了。不...
当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时,引发该文件,他与onFocas事件是一个对应的关系。 5.onFocus事件:光标进入文本框时触发调用函数。 当用户单击Text或textarea以及select对象时,...
第一:action是form的属性,html5已经将其定义为必需的属性值,onSubmit为事件,通过<input type=submit />提交时进行一个函数验证。。 第二:要说执行的先后顺序,个人理解是onSubmit在先,先验证,验证返回...
在进行表单提交时,需要对输入框和文本域等的value的合理性进行验证,可以编写form的onSubmit事件,代码,踩过的坑;注意点: 1、只有通过form里面的 <button type="submit" >提交</button>进行表单的...
第一种方法:直接按钮中加入 ...从代码就可以看出,我们只需在提交按钮上加入这一句: onclick=”[removed...第二种方法:通过onSubmit事件实现,并且可以将变灰按钮变为可用 在form里面添加 onSubmit事件,如果表单加入了
onSubmit onUnload 第十章 LiveWire 数据库服务 本章包含了服务器端与 LiveWire 关联的对象:database,DbPool,Connection,Cursor,Stproc,Resultset 和 blob。 database 事务 属性 方法 DbPool 属性 方法 ...
不过在IE6,safari4,ff3.5,opera10,chrome中,按Enter,不但激发form的submit事件,同时也会激发提交按钮的onclick,激发顺序为提交按钮的 onclick → form 的 onsubmit。 键盘事件 键盘事件 [Ctrl+A 全选 ...
onSubmit onUnload 第十章 LiveWire 数据库服务 本章包含了服务器端与 LiveWire 关联的对象:database,DbPool,Connection,Cursor,Stproc,Resultset 和 blob。 database 事务 属性 方法 DbPool 属性 ...
代码如下:/** * 表单提交校验 **/function onSubmit(){ if($(‘#name’).val().length<2){ alert(“名称请不少于两个汉字”); return false; } var t = new Date().getTime(); $.ajax({ type: ...
submit方法:该方法不会触发onsubmit事件 item方法:返回某字段元素值(不能返回type=image类型) onsubmit事件:在程序提交前触发,若其值为true则提交,若为false则不提交给服务器 三、script标签属性 ·defer ...
<body> <form action="clock.... 第一种方法:利用event的阻止默认事件机制,页面载入之后获得submit元素,然后为submit注册click响应函数,参数为event事件。 在用户
13.6.7 HTML事件处理函数和JavaScript事件方法 13.6.8 onError事件 13.7 event对象 13.7.1 捕获和冒泡(滴漏和冒泡) 13.7.2 事件对象属性 13.7.3 使用事件对象属性 13.7.4 将事件...
如果表单是通过onsubmit进行Ajax提交,注意将表单提交按钮input type属性设为button,尽量不要设置为submit类型。 另外,在提交事件发出后,最好将提交按钮设置为disabled,防止由于网络延时问题,让用户有机会进行...
表单的客户端javascript验证有各种各样的写法,登录为form的onsubmit事件或submit按扭写一个函数。对于小表单(只有一两个表单域的表单)就不必再专门再用javascript写一个验证函数了,只需要在form的onsubmit事件里...
ASP.NET 的服务器控件回发是使用这一段JS代码: 代码如下: var theForm = ...theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value
表单与javascript的课件,ppt中有源码,可以直接复制过来运行,是很好的教学资源: 表单元素事件: 文本域事件 按钮事件 复选框事件 单选按钮事件 表单有效性验证: <HTML> <HEAD><TITLE>表单对象的事件 ...