提交表单
用户单击提交按钮或图像按钮时,就会提交表单。使用<input>和<button>都可以定义提交按钮,只要将其type特性的值设置为"submit"即可,而图像按钮则是通过将<input>的
type特性设置为"image"来定义。
<input type="submit" vlaue="Submit Form"> --通用提交按钮
<button type="submit">Submit Form</button> --自定义提交按键
<input type="image" src="graphic.gif"/> --图像按钮
只要表单中存在上面列出的任何一种按钮,那么在相应的表单控件拥有焦点的情况下,按回车键就可以提交表单。(textarea是一个例外,在文本区中回车会换行。)
在JavaScript中,以编程方式调用submit()方法也可以提交表单。而且,这种方式无需表单包含提交按钮,任何时候都可以正常提交表单。
var from=document.getElementById("myForm");
//提交表单
form.submit();
在以调用submit()方法的形式提交表单时,不会觖submit事件,因此要记得在调用此方法之前先验证表单数据。
重置表单
在用户单击重置按键时,表单会被重置。使用type特性值为"reset"的<input>或<button>都可以创建重置按钮。如下面所示:
<input type="reset" vlaue="Reset Form"> --通用提交按钮
<button type="reset">Reset Form</button> --自定义提交按键
通过脚本重置
var from=document.getElementById("myForm");
//提交表单
form.reset();
表单字段
var form=document.getElementById("form1");
//取得表单中的第g个字段
var field1=from.elements[0];
//取得名为"textbox1"的字段
var field2=form.elements["textbox1"];
//取得表单中包含的字段的数量
var fieldCount=form.elements.length;
如果有多个表单控件都在使用一个name(如单选按钮),那么就会返回以该name命名的一个NodeList.
共有的表单字段方法
每个表单字段都有两个方法:focus(获得焦点)和blur(失去焦点);
自动切换焦点
为了增强易用性,同时加快数据输入,可以在前一个文本框中的字符达到最数量后,自动将焦点切换到下一个文本框。可以通过下列代码实现:
( function(){
function tabForward(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarge(event);
if(target.value.length==target.maxLength){
var form=target.form;
for(var i=0;len=form.elements.length;i<len;i++){
if(form.elements[i]==target){
if(form.elements[i+1]){
form.elements[i+1].focus();
}
return;
}
}
}
}
var textbox1=document.getElementById("txtTel1");
var textbox2=document.getElementById("txtTel2");
var textbox3=document.getElementById("txtTel3"); EventUtil.addHandler(textbox1,"keyup",tabForward);
EventUtil.addHandler(textbox2,"keyup",tabForward);
EventUtil.addHandler(textbox3,"keyup",tabForward); }
)();