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操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
Javascript的闭包详解
Dec 26 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 Javascript
javascript实现点击产生随机图形
Jan 25 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
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
php基础知识:控制结构
2006/12/13 PHP
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
9个PHP开发常用功能函数小结
2011/07/15 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
介绍一下Java中的Class类
2015/04/10 面试题
机械个人求职信范文
2014/01/24 职场文书
标准单位租车协议书
2014/09/23 职场文书
毕业论文指导教师评语
2014/12/30 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
葬礼主持词
2015/07/02 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
Java实现简易的分词器功能
2021/06/15 Java/Android