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 相关文章推荐
读jQuery之十一 添加事件核心方法
Jul 31 Javascript
异步javascript的原理和实现技巧介绍
Nov 08 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
详解Typescript里的This的使用方法
Jan 08 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
ftp类(example.php)
2006/10/09 PHP
php中取得文件的后缀名?
2012/02/20 PHP
解析yii数据库的增删查改
2013/06/20 PHP
curl和libcurl的区别简介
2015/07/01 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
python转换摩斯密码示例
2014/02/16 Python
Python break语句详解
2014/03/11 Python
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
python 实现控制鼠标键盘
2020/11/27 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
实习生单位鉴定意见
2013/12/04 职场文书
《花的勇气》教后反思
2014/02/12 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
见习期个人总结
2015/03/05 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
导游带团欢迎词
2015/09/30 职场文书
LeetCode189轮转数组python示例
2022/08/05 Python