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 相关文章推荐
解密效果
Jun 23 Javascript
jquery下利用jsonp跨域访问实现方法
Jul 29 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
php array_map()数组函数使用说明
2011/07/12 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
iframe 异步加载技术及性能分析
2011/07/19 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
js正则取值的结果数组调试方法
2018/10/10 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
使用PYTHON创建XML文档
2012/03/01 Python
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
浅析Python3爬虫登录模拟
2018/02/07 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
详解Python传入参数的几种方法
2019/05/16 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
python中xlutils库用法浅析
2020/12/29 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
计算机科学与技术应届生求职信
2013/11/07 职场文书
考试不及格检讨书
2014/01/09 职场文书
自荐信需注意事项
2014/01/25 职场文书
时尚休闲吧创业计划书
2014/01/25 职场文书
国家助学金获奖感言
2014/01/31 职场文书
文化产业实施方案
2014/06/07 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS