JS和DOM的表单

表单处理分成五个部分:1、获取表单对象;2、访问表单元素;3、表单元素共性;4、提交表单;5、重置表单。

一、获取表单对象
1、使用ID来获取表单对象 var oForm = document.getElementByIdx("form1");
2、使用document.forms数组索引来获取表单对象 var oForm = document.forms[0];
3、使用document.forms数组名称属性来获取表单对象 var oForm = document.forms["formZ"];

参考下面的例子,一个html文档中允许多个表单。
document.getElementByIdx("form1") ==  document.forms[0] == document.forms["formZ"]
document.getElementByIdx("form2") ==  document.forms[1] == document.forms["formY"]

二、访问表单域中的元素
1、使用表单的elements(数组)属性。表单中的按钮,文本框或者其他表单元素集合都可以使用这些元素的name属性,抑或是索引值来访问表单元素
 var oForm = document.forms[0];    ///获取表单对象
var oFirstField = oForm.elements[0]; //使用索引值0 获取第一个表单元素
var oTextbox1 = oForm.elements[“textbox1”];//使用表单元素的name属性textbox1来获取该元素
2、简写模式,把表单元素的name属性textbox1当作表单的属性来访问该元素
var oTextbox1 = oForm.textbox1; //get the field with the name “textbox1”
3、把表单对象当作一个数组,用name属性访问表单对象
var oTextbox1 = oForm[“text box 1”]; //get the field with the name “text box 1”

下面这个例子当中 oForm.textbox1 == oForm[“textbox1”] == oForm.elements[“textbox1”] == oForm.elements[1]

三、表单域(元素)的共性(共同特征)
所有的表单元素 按钮 复选框 文本域 下拉菜单== 除了“隐藏域”之外都有共同的属性,方法和事件:
1、都具有disabled属性,即禁用该表单元素,使得只具有其外形特征,而不具备其功能
2、都具有form属性来指向这个某表单,表示是该表单的一部分
3、都具有blur()方法,使得当前表单域(元素)失去焦点
4、都具有focus()方法, 使得当前表单域(元素)获取焦点
5、都有onblur()事件,当表单域失去焦点时触发事件
6、都有onfocus()事件,当表单域获得焦点时触发事件

For example:
var oField1 = oForm.elements[0];
var oField2 = oForm.elements[1];
//禁用第一个表单元素
oField1.disabled = true;
//第二个表单元素获得焦点
oField2.focus();
//第一个表单元素的form属性是否指向(等于)oform表单
alert(oField1.form == oForm); //输出 “true”

四、提交表单
1、下面是两个按钮,一个是提交按钮,一个是图片按钮。提交表单的时候用alert()警告获取哪个按钮提交表单
<input type=”submit” value=”Submit” /> <!-- submit button -->
<input type=”image” src=”submit.gif” /> <!-- image button -->
<form method=”post” action=”javascript:alert(‘Submitted’)”>

2、不是提交表单按钮也可以使用oForm.submit(); 来提交表单,譬如
<input type=”button” value=”Submit Form” onclick=”document.forms[0].submit()” />

3、阻止表单提交
可以使用getEvent截取表单事件,使用preventDefault()来阻止该事件发生
function handleSubmit() {
var oEvent = EventUtil.getEvent();
oEvent.preventDefault();
}

4、只允许提交一次表单(防止重复提交)
这里有一个表单提交按钮
<input type=”submit” value=”Submit” />
我们可以添加onclick事件,当点击该按钮之后this.disabled=true;禁用该按钮,然后提交表单。
<input type=”button” value=”Submit”
onclick=”this.disabled=true; this.form.submit()” />

五、重置表单
(1)使用reset按钮
<input type=”reset” value=”Reset Values” />
(2)使用oForm.reset() 方法来重置表单

总结:
1、获取表单对象可以用DOM方法getElementById,数组索引 document.forms[0] 数组名称 document.form["form1"] 三种方法
2、访问表单元素可以使用oForm.elements[0] 表单.elements属性索引,或name属性。或者把表单对象当作数组oForm["textbox1"],把表单元素当作表单的属性oForm.textbox1
3、表单元素除了hiden隐藏域之外,都具有disabled是否禁用属性,form属性表示该元素属于哪个表单,blur()失去焦点 focus()获得焦点。onblur() onfocus()事件这六个成员(属性|方法)
4、提交按钮提交表单,submit()方法提交表单,如何只允许提交表单一次
5、重置按钮重置表单,reset()方法重置表单 

猜你喜欢

转载自guoying252166655.iteye.com/blog/1955393
今日推荐