表单元素的submit()方法和onsubmit事件应用概述

表单元素拥有submit方法,同时也具有onsubmit事件句柄,用于监听表单提交。可以使用elemForm.submit();方法触发表单提交。
1、表单元素中出现了name="submit"的元素
这种情况下elemForm.submit();将不会触发表单提交,因为表单原始的submit方法将会被覆盖(formElem.submit就是对该元素的引用)。
2、elemForm.submit();不会触发表单的onsubmit事件
没有为什么,标准中就是这么规定的。
与此有些类似的是onfocus、onblur和focus()、blur()之间的关系却不同,调用elem.blur()或elem.focus()却会触发onblur和onfocus事件。
这些为我们提供了一个思路,在设计一些UI组件时,需要考虑一些事件在内部调用时是否要触发相关事件。例如Dialog组件,它具有onopen事件,同时返回的对象也会有open()方法,我们这时就必须考虑下open()方法是否需要触发onopen()事件。
3、动态创建表单时遇到的问题
经常使用的一种方法如下,他会在表单submit前调用,根据validate()函数的返回值决定是否需要提交表单。


代码如下:

<form onsubmit="return validate();"></form>

然而,如果要动态地为一个表单添加验证,即HTML代码中没有写onsubmit,而在页面加载后用javascript给这个form加一个handler,问题就 来了。假设我们已经得到了表单的DOM节点,保存在变量elemForm中,一般这样来给它加上handler:


代码如下:

var check = function() {  
    if ('OK') {  
        return true;  
    } else {  
        return false;  
    }  
};  
if (elemForm.addEventListener) {  
    elemForm.addEventListener("submit", check, false);  
} else if (elemForm.attachEvent) {  
    elemForm.attachEvent("onsubmit", check);  
}

问题就出现了:在Firefox和Chrome中"return false;"是不能阻止表单的提交的(在IE中可以),这就是为什么大家在onsubmit属性中要写"return check()",而不仅仅是"check()"。

原因是什么呢?请看ECMAScript Language Binding,其中明确地写着,"Object EventListener: This is an ECMAScript function reference. This method has no return value. The parameter is a Event object",意思就是event listener没有返回值。换一种理解,addEventListener可以为元素绑定多个监听函数,某一个事件监听函数的返回值,不可以作为整个事件的返回值。可以使用下面的方法解决


代码如下:

function check(ev) {  
    ev = ev || window.event; // Event对象  
    if (ev.preventDefault) { // 标准浏览器  
        e.preventDefault();  
    } else { // IE浏览器  
        window.event.returnValue = false;  
    }  
}

其实一切的根本都因为IE不支持DOM Level 2。

(0)

相关推荐

  • 表单元素事件 (Form Element Events)

    属性 值 描述 onchange 脚本 当元素改变时执行脚本 onsubmit 脚本 当表单被提交时执行脚本 onreset 脚本 当表单被重置时执行脚本 onselect 脚本 当元素被选取时执行脚本 onblur 脚本 当元素失去焦点时执行脚本 onfocus 脚本 当元素获得焦点时执行脚本 w3c的标准是这么描述的. 可是发现IE可以执行(不过如果你在遨游下测试onfocus的话千万别用alert(),会无限弹出.),其他浏览器都不可以实现.IE向来是个不听话的主,都是搞私有主义的....

  • 表单Form的submit事件不响应的解决方法

    一.问题描述 类比一下,我用input.select()做了测试,却能响应select事件.这个原因先放一边,我们看看先怎么把眼下的问题解决了. 不响应事件的代码示例: var form = document.getElementById('form1'); form.onsubmit = function() { alert(1); }; form.submit(); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 实际运行,不会有alert出来. 虽然用submit方法来提交表单

  • jquery中dom操作和事件的实例学习-表单验证

    很显然,这样做能提升更好的用户体验. html代码: 复制代码 代码如下: <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <input type="text" id="username" class="r

  • js表单事件详细汇总

    javascript表单事件汇总 1.onabort(ns3,ns4,ie4):当用户终止正在打开的网页时产生该事件. 2.onblur(ns3,ns4,ie3,ie4):某元素失去活动焦点时产生该事件.例如鼠标在文本框中点击后又在文本框外点击时就会产生. 3.onchange(ns3,ns4,ie3,ie4):当网页上某元素的内容发生改变时产生.例如在文本框中输入文本后又在文本框外点击时就会产生. 4.onclick(ns3,ns4,ie3,ie4)单击网页上的某元素时产生 5.ondblcl

  • 表单元素的submit()方法和onsubmit事件应用概述

    表单元素拥有submit方法,同时也具有onsubmit事件句柄,用于监听表单提交.可以使用elemForm.submit();方法触发表单提交.1.表单元素中出现了name="submit"的元素这种情况下elemForm.submit();将不会触发表单提交,因为表单原始的submit方法将会被覆盖(formElem.submit就是对该元素的引用).2.elemForm.submit();不会触发表单的onsubmit事件没有为什么,标准中就是这么规定的.与此有些类似的是onfo

  • 动态表单验证的操作方法和TP框架里面的ajax表单验证

    动态验证的操作方法 function yz() { if(empty($_POST)) { $this->display(); } else { $db=D("Info"); $shu=array( array("Code","require","代号不能为空",0,"regex",3), ); if(!$db->validate($shu)->create()) { echo $db-&

  • JS document form表单元素操作完整示例

    本文实例讲述了JS document form表单元素操作.分享给大家供大家参考,具体如下: <html> <head> <title>form表单操作</title> <meta charset="UTF-8"/> <script type="text/javascript"> function testForm(){ // 获取form对象 方法一,通过id,比较普遍的方法 var fm=d

  • JavaScript实现表单元素的操作

    一.forms[]; Form 表单对象 document.forms[] 是一个数组,包含了文档中所有的表单(<form>).要引用单个表单,可以用 document.forms[x],但是一般来说,人们都会这样做:在<form>标记中加上“name="..."”属性,那么直接用 “document.<表单名>”就可以引用了. 1.属性 name 返回表单的名称,也就是<form name="...">属性. act

  • AngularJS使用指令增强标准表单元素功能

    Angular 可使用指令无缝地增强标准表单元素的功能,我们将讨论它的优点,包括: 数据绑定.建立模型属性.验证表单.验证表单后反馈信息.表单指令属性 下面我们通过案例验证他们的用法: 一.双向数据绑定(ng-model)和建立模型属性 <!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angular Directive</ti

  • jQuery选择器之表单元素选择器详解

    本文实例为大家分享了表单元素选择器,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc

  • jQuery复制表单元素附源码分享效果演示

    我们在提交表单时,有时会遇到需要重复添加多个相同表单元素,如订单信息中需要添加多个不同型号的产品.表单数据中新增字段信息等.这个时候我们可以在表单中直接放置一个"新增一项"或"复制"按钮,通过点击按钮即可实现复制表单元素. 查看演示 下载源码 HTML 本文我们通过实例介绍一款简单的基于jQuery的元素复制插件,通过调用该插件轻松实现元素复制功能. 首先载入jQuery库文件和元素复制插件duplicateElement.min.js. <script sr

  • Ajax中通过JS代码自动获取表单元素值的示例代码

    我们在使用Ajax的时候,通常需要获取表单元素值,然后发送给后台的服务器端程序处理.如果表单元素不多的情况我们常常会通过GET方式来获取表单元素值,但如果表单元素非常多,此时就需要用POST方式来获取表单元素值,那么如何来获取表单元素值呢?下面给出一段JS代码即可自动获取表单元素的值了. function getFormQueryString(frmID) //frmID是表单的ID号,请在表单form中先命名一个ID号 { var frmID=document.getElementById(f

  • jQuery表单元素选择器代码实例

    本文实例为大家分享了jQuery表单元素选择器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href=

随机推荐