表单脚本

获取表单常见方法：
1.添加id特性

var form=document.getElementById("form1");

2.通过document.forms可以取得页面中所有的表单

var firstForm=document.forms[0];//取得页面中的第一个表单

表单提交：

<!--通用表单提交按钮-->
<input type="submit" value="Submit" Form>
<!--自定义提交按钮-->
<button type="submit">Submit Form</button>
<!--图片按钮-->
<img type="image" src="img.jpg">

只要表单中存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可以提交表单。
在JavaScript中，以编程的方式调用submit()方法也可以提交表单。

var form=document.getElementById("form1");
form.submit();

重置表单：

<!--通用重置按钮-->
<input type="reset" value="Submit Form">
<!--自定义重置按钮-->
<button type="reset">Reset Form</button>

在重置表单中，所有的表单字段都会恢复到页面刚加载完毕时的初始状态。如果某个字段的初始值为空，就会恢复为空；而带有默认值的字段，也会恢复为默认值。
通过JavaScript来重置表单

var form=document.getElementById("form1");
form.reset();

跨浏览器的事件对象和事件处理程序：

var EventUtil={			 
    addHandler:function(element,type,handler){
		if(element.addEventListener){
           element.addEventListener(type,handler,false);
		}else if(element.attachEvent){
		   element.attachEvent("on"+type,handler);
		}else{
			element["on"+type]=handler;
		}
	},
	getEvent:function(event){
		return event?event:window.event;
	},
	getTarget:function(event){
		return event.target||event.srcElement;
	},
	preventDefault:function(event){
		if(event.preventDefault){
			event.preventDefault;
		}else{
			event.returnValue=false;
		}
	},
	removeHandler:function(element,type,handler){
		if(element.removeEventListener){
			element.addEventListener(type,handler,false);
		}else if(element.detachEvent){
			element.detachEvent("on"+type,handler);
		}else{
			element["on"+type]=null;
		}
	}
} 

解决表单重复提交的方法：
1.在第一次提交表单后禁用提交按钮

//避免多次提交表单
EventUtil.addHandler(form,"submit",function(event){
	event=EventUtil.getEvent(event);
	var target=EventUtil.getTarget(event);
	//取得提交按钮
	var btn=target.element["submit-btn"];
	//禁用它
	btn.disabled=true;
});

2.利用onsubmit事件处理程序取消后续的表单提交操作。
共有表单字段方法：focus()和blur()
自动把焦点移动到相应字段：

<input type="type" autofocus>

为了保证上面的代码设置autofocus的浏览器中正常运行，必须先检测是否设置了该属性，如果设置了，就不用再调用focus()了。

EventUtil.addhandler(window,"load",function(event){
	var element=document.forms[0].elements[0];
	if(element.autofocus!==true){
		element.focus();
	}
})

选取select事件选择的文本

function getSelectedText(textbox){
	if(typeof textbox.selectionStart=="number"){
		return textbox.value.substring(textbox.selctionStart,textbox.selctionEnd);
	}else if(document.selection){
		return document.selection.createRange().text;	
	}
}

过滤输入：
只允许用户输入数值

EventUtil.addHandler(textbox,"keypress",function(event){
	event=EventUtil.getEvent(event);
	var target=EventUtil.getTarget(event);
	var charCode=EventUtil.getCharCode(evnet);
	if(!/\d/.test(String.formCharCode(charCode))&&charCode>9&&!event.ctrlkey){
		EventUtil.preventDefault(event);
	}
});

自动切换焦点：

html
<input type="text" name="tel1" id="txtTel1" maxlength="3">	
<input type="text" name="tel2" id="txtTel2" maxlength="3">	
<input type="text" name="tel3" id="txtTel3" maxlength="4">	
js
(function(){
	function tabForward(event){
		event=EventUtil.getEvent(event);
		var target=EventUtil.getTarget(event);
		if(target.value.length==target.maxLength){
			var form=target.form;
			for(var i=0,len=form.elements.length;i<len;i++){
				if(form.element[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);
})()

表单序列化：
浏览器怎样将数据发送给服务器
1.对表单字段的名称和值进行URL编码，使用和号（&）分隔
2.不发送禁用的表单字段
3.只发送勾选的复选框和单选按钮
4.不发送type为"reset"和"button"的按钮
5.多选选择框中的每个选中的值单独一个条目
6.在单击提交按钮提交表单的情况下，也会发送提交按钮；否则，不发送提交按钮。也包括type为"image"的元素
7.元素的值，就是选中的元素的value特性的值。如果元素没有value特性，则是元素的文本值。

function serialize(form){
	var parts=[],field=null,i,len,j,optLen,option,optValue;
	for(i=0,len=form.elements.length;i<len;i++){
		field=form.elements[i];
		switch(field.type){
			case "select-one":
			case "select-multiple":
				if(field.name.length){
					for(j=0,optlen=field.options.length;j<optLen;j++){
						option=field.options[j];
						if(option.selected){
							optValue="";
							if(option.hasAttribute){
								optValue=(option.hasAttribute("value")?option.value:option.text);
							}else{
								optValue=(option.hasAttribute["value"].specified?option.value:option.text);
							}
							parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(optValue));
						}
					}
				}
				break;
			case undefined:
			case "file":
			case "submit":
			case "reset":
			case "button":
				break;
			case "radio":
			case "checkbox":
				if(!field.checked){
					break;
				}
			defalut:
			if(field.name.length){
				parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(field.value));
			}
		}
	}
	return parts.join("&");
}