JavaScript 表单处理实现代码
一表单介绍
在HTML中,表单是由<form>元素来表示的,而在JavaScript中,表单对应的则是HTMLFormElement类型;
//HTMLFormElement继承了HTMLElement;因此它拥有HTML元素具有的默认属性,别且还独有自己的属性和方法;
HTMLFormElement属性和方法
属性或方法说明
acceptCharset服务器能够处理的字符集;
action接受请求的URL;
elements表单中所有控件的集合;
enctype请求的编码类型;
length表单中控件的数量;
method要发送的HTTP请求类型,通常是'get'或'post';
name表单的名称;
target用于发送请求和接受响应的窗口名称;
reset()将所有表单重置;
submit()提交表单;
1.获取表单<form>对象;
document.getElementById('myForm');//使用ID获取<form>元素;
document.getElementsByTagName('form')[0];//使用获取form元素集合里的第一个元素;
document.forms[0];//使用forms的数字下标获取元素;
document.forms['myForm'];//使用forms的名称下标获取元素;
2.提交表单
(1).通过事件对象,可以阻止submit的默认行为,submit事件的默认行为就是携带数据跳转到指定页面;
addEvent(fm,'submit',function(evt){
preDef(evt);
});
(2).我们可以使用submit()方法来自定义触发submit事件;也就是说,并不一定非要点击submit按钮才能提交;
if(e.ctrlKey&&e.keyCode==13){
fm.submit(); //判断按住了ctrl和enter键触发提交;
}
//PS:在表单中尽量避免使用name="submit"或id="submit"等命名,这会和submit()方法发生冲突导致无法提交;
(3).重复提交
//当一条数据提交到服务器的时候会出现延迟等长时间没反映,导致用户不停的点击提交,
//从而使得重复提交了很多相同的请求,或造成错误或写入数据库多条相同信息;
addEvent(fm,'submit',function(evt){ //模拟服务器延迟;
preDef(evt);
setTimeout(function(){ //3秒后才处理提交到服务器;
fm.submit();
},3000);
});
//解决重复提交方案 //第一种:提交之后,立刻禁用点击按钮; document.getElementById('sub').disabled=true; //将按钮禁用; //第二种:提交之后,取消后续的表单提交操作; varflag=false; //设置一个监听变量; if(flag==true)return; //如果存在则返回退出事件; flag=true; //否则确定是第一次,改变监听变量的值;