JavaScript高级程序设计52.pdf
表单脚本
表单的基础知识
在HTML中,表单是由<form>元素表示的,在Javascript对应的是HTMLFormElement类型,它继承自HTMLElement,因此具有与其他HTML元素相同的默认属性,HTMLFormElement也有它自己独有的属性和方法
acceptCharset:服务器能够处理的字符集;等价于HTML中accept-charset特性
action:接受请求的URL;等价于HTML的action特性
elements:表单中所有控件的集合(HTMLCollection)
enctype:请求的编码类型;等价于HTML中enctype特性
length:表单中控件的数量
method:要发送的HTTP请求类型,通常是“get”或“post”;等价于HTML中method特性
name:表单的名称;等价于HTML的name特性
reset():将所有表单重置为默认值
submit():提交表单
target:用于发送请求和接收响应的窗口名称;等价于HTML的target特性
取得<form>元素引用的方式有好几种
var form=document.getElementById("form1");
var firstForm=document.form[0];
var myForm=document.form["form2"];
提交表单
点击提交按钮或图像按钮,就会提交表单
使用<input>或<button>都可以定义提交按钮,将其type特性设置为“submit”即可
使用<input>定义图像按钮,type特性设置为“image”
<input type="submit" value="Submit Form">
<button type="submit">Submit Form</button>
<input type="image" src="graphic.gif">
以这种方式提交表单时,浏览器在将请求发送给服务器前会触发submit事件,有机会验证表单数据,阻止默认的行为
var form=document.getElementById("myForm");
EventUtil.addHandler(form,"submit",function(event){
event=EventUtil.getEvent(event);
EventUtil.preventDefault(event);
});
调用submit()方法提交表单不会触发submit事件,要在调用此方法之前验证表单数据
var form=document.getElementById("myForm");
form.submit();
解决重复提交表单的两个方法:第一次提交表单后就禁用提交按钮,或者利用onsubmit事件处理程序取消后续的表单提交操作
重置表单
使用<input>或<button>都可以定义重置按钮,将其type特性设置为“reset”即可
<input type="reset" value="Submit Form">
<button type="reset">Submit Form</button>
会触发reset事件
调用reset()方法也会触发reset事件
var form=document.getElementById("myForm");
form.reset();
表单字段
每个表单都有elements属性,是表单中所有元素的集合,其中包含着表单中所有的字段,例如<input>、<textarea>、<button>和<fieldset>,可以按照位置和name特性来访问它们
var form=document.getElementById("myForm");
var field1=form.elements[0];
var field2=form.elements["textbox1"];
var fieldCount=form.elements.length;
如果多个表单控件都使用一个name,elements[name]返回一个NodeList,是一个集合
共有的表单字段属性
除了<fieldset>元素以外,所有的表单字段都拥有相同的一组属性
disabled:布尔值,表示当前字段是否被禁用
form:指向当前字段所属表单的指针;只读
name:当前字段的名称
readOnly:布尔值,表示当前字段是否只读
tabIndex:表示当前字段的切换(tab)序号
type:当前字段的类型,如“checkbox”、“radio”等等
value:表示当前字段被提交给服务器的值,对于文字字段来说,这个属性是只读的,包含文件在计算机中的路径
除了form只读,其他可修改
//避免多次提交表单
EventUtil.addHandler(form,"submit",function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
var btn=target.elements["submit-btn"];
btn.disabled=true;
});
以上代码在表单提交过一次以后马上禁用它,由于执行时差问题,不能用onclick事件处理程序来处理重复提交表单问题
<input>和<button>元素的type可以修改,<select>元素的type属性只读