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 相关文章推荐
JavaScript中Array 对象相关的几个方法
Dec 22 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
JavaScript获取多个数组的交集简单实例
Nov 11 Javascript
jQuery链使用指南
Jan 20 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
举例讲解Node.js中的Writable对象
Jul 29 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
SVG描边动画
Feb 23 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
微信小程序日期选择器实例代码
Jul 18 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
咖啡界又出新概念,无需咖啡豆的分子咖啡
2021/03/03 咖啡文化
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
javascript中的作用域scope介绍
2010/12/28 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
原生js二级联动效果
2017/06/20 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python的Flask框架与数据库连接的教程
2015/04/20 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
教师实习期自我鉴定
2013/10/06 职场文书
金砖之国观后感
2015/06/11 职场文书
话题作文之自信作文
2019/11/15 职场文书
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android