首页 > 代码库 > JavaScript高级程序设计52.pdf

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="http://www.mamicode.com/Submit Form">

<button type="submit">Submit Form</button>

<input type="image" src="http://www.mamicode.com/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="http://www.mamicode.com/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属性只读