表单元素的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。

时间: 2024-12-01 02:36:21

表单元素的submit()方法和onsubmit事件应用概述_基础知识的相关文章

表单的焦点顺序tabindex和对应enter键提交_基础知识

表单的焦点tab键顺序:tabindex决定,如果值缺省,择按顺序 用户:<input name="Text1" type="text" tabindex="1" /> 密码:<input name="Password1" type="password" tabindex="2" >对应onsubmit事件即可: 复制代码 代码如下: <form actio

JavaScript中的call方法和apply方法使用对比_基础知识

方法定义call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象. 如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj. apply方法: 语法:apply([thisObj[,argArray]]) 定义

动态表单验证的操作方法和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-&

网页中表单按回车就自动提交的问题的解决方案_基础知识

1.当form表单中只有一个<input type="text" name="name" />时按回车键将会自动将表单提交. 复制代码 代码如下: <form id="form1" action="post.php" method="post">       <input type="text" name="name" />   &

js表单事件详细汇总_基础知识

javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown IE4.N4 按下鼠标时触发此事件 onmouseup IE4.N4 鼠标按下后松开鼠标时触发此事件 onmouseover IE3.N2 当鼠标移动到某对象范围的上方时触发此事件 onmousemove IE4.N4 鼠标移动时触发此事件 onmouseout IE4.N3 当鼠标离开某对象范围

ASP.NET中实现把form表单元素转为实体对象或集合_实用技巧

简介: 做WEBFROM开发的同学都知道后台接收参数非常麻烦 虽然MVC中可以将表单直接转为集实,但不支持表单转为 LIST<T>这种集合 单个对象的用法: 表单: 复制代码 代码如下: <input name='id'  value='1' > <input name='sex'  value='男' > 后台: 复制代码 代码如下: //以前写法             DLC_category d = new DLC_category();            

解决表单元素的前后有一大块空白的问题

解决|问题 为什么表单元素的前后有一大块空白? 解决思路: 因为表单元素form是默认外补白margin属性不为0的块元素,所以要解决问题有两个方法,定义块元素为行内元素,或者设置CSS对象的margin属性为0. 具体步骤: 方法一:设置CSS对象的margin属性为0:          <div style="border:1px solid #000">第一行<form style="margin:0px"></form>

HTML5的表单元素简介

HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input type IE Firefox Opera Chrome Safari datalist No No 9.5 No No keygen No No 10.5 3.0 No output No No 9.5 No No datalist 元素 datalist 元素规定输入域的选项列表. 列表是通过 datalist 内的 op

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

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