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获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
Javascript中的几种URL编码方法比较
Jan 23 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
JavaScript中EventLoop介绍
Jan 22 Javascript
在vue中封装可复用的组件方法
Mar 01 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 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
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
大家未必知道的Js技巧收藏
2008/04/07 Javascript
$.ajax json数据传递方法
2008/11/19 Javascript
JavaScript 拖拉缩放效果
2008/12/10 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
jQuery事件对象总结
2016/10/17 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
Vue.js 单页面多路由区域操作的实例详解
2017/07/17 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
vue实现购物车案例
2020/05/30 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
[01:09:24]Ti4开幕式
2014/07/19 DOTA
python实现PID算法及测试的例子
2019/08/08 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
python数据爬下来保存的位置
2020/02/17 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
python实现批量命名照片
2020/06/18 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
银行出纳岗位职责
2013/11/25 职场文书
小学生开学感言
2014/02/28 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
滴水洞导游词
2015/02/10 职场文书
小学班主任工作随笔
2015/08/15 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
Java 在生活中的 10 大应用
2021/11/02 Java/Android
Java数组详细介绍及相关工具类
2022/04/14 Java/Android