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 相关文章推荐
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
vue--vuex详解
Apr 15 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 Javascript
vue addRoutes路由动态加载操作
Aug 04 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
PHP连接MySQL数据的操作要点
2015/03/20 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
jquery 弹出层实现代码
2009/10/30 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
详解Python中for循环的使用方法
2015/05/14 Python
Python反射用法实例简析
2017/12/22 Python
python3中布局背景颜色代码分析
2020/12/01 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
军训自我鉴定
2014/01/22 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
写给老婆的保证书
2015/02/27 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书