这篇文章主要介绍了JavaScript 表单处理实现代码,需要的朋友可以参考下
一 表单介绍
在HTML中,表单是由
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; // 将按钮禁用;
// 第二种:提交之后,取消后续的表单提交操作;
var flag = false; // 设置一个监听变量;
if(flag == true)return; // 如果存在则返回退出事件;
flag = true; // 否则确定是第一次,改变监听变量的值;
以上就是JavaScript 表单处理实现代码的详细内容,更多请关注0133技术站其它相关文章!
未经允许不得转载:0133技术站首页 » JavaScript 教程