js清空表单数据的两种方式(遍历+reset)


Posted in Javascript onJuly 18, 2014

方法1:遍历页面元素

/*
清空FORM表单内容 id:表单ID*/ 
function ClearForm(id) {
var objId = document.getElementById(id);
if (objId == undefined) {
return;
}
for (var i = 0; i < objId.elements.length; i++) {
if (objId.elements[i].type == "text") {
objId.elements[i].value = "";
}
else if (objId.elements[i].type == "password") {
objId.elements[i].value = "";
}
else if (objId.elements[i].type == "radio") {
objId.elements[i].checked = false;
}
else if (objId.elements[i].type == "checkbox") {
objId.elements[i].checked = false;
}
else if (objId.elements[i].type == "select-one") {
objId.elements[i].options[0].selected = true;
}
else if (objId.elements[i].type == "select-multiple") {
for (var j = 0; j < objId.elements[i].options.length; j++) {
objId.elements[i].options[j].selected = false;
}
}
else if (objId.elements[i].type == "textarea") {
objId.elements[i].value = "";
}
//else if (objId.elements[i].type == "file") {
// //objId.elements[i].select();
// //document.selection.clear();
// // for IE, Opera, Safari, Chrome
// var file = objId.elements[i];
// if (file.outerHTML) {
// file.outerHTML = file.outerHTML;
// } else {
// file.value = ""; // FF(包括3.5)
// }
//}
}
}

方法2:使用 reset 按钮

页面中增加

<!--用来清空表单数据-->
<input type="reset" name="reset" style="display: none;" />

触发 reset 事件

$("input[type=reset]").trigger("click");
Javascript 相关文章推荐
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 Javascript
jquery dialog获取焦点的方法
Feb 09 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 #Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 #Javascript
关于javaScript注册click事件传递参数的不成功问题
Jul 18 #Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 #Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 #Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 #Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 #Javascript
You might like
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
javascript 类定义的4种方法
2009/09/12 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
python实现类的静态变量用法实例
2015/05/08 Python
Python编程中归并排序算法的实现步骤详解
2016/05/04 Python
python:接口间数据传递与调用方法
2018/12/17 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
postman传递当前时间戳实例详解
2019/09/14 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
中学教师请假制度
2014/02/03 职场文书
毕业横幅标语
2014/10/08 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
python 实现的截屏工具
2021/05/08 Python
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
python基于turtle绘制几何图形
2021/06/15 Python
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs