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属性只读