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的密码强度验证代码
Mar 01 Javascript
JS弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
js回到页面指定位置的三种方式
Dec 17 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 Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
Django Rest framework频率原理与限制
2019/07/26 Python
python实现udp传输图片功能
2020/03/20 Python
python实现数字炸弹游戏
2020/07/17 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
学习委员自我鉴定
2014/01/13 职场文书
酒店保安员岗位职责
2014/01/31 职场文书
公司寄语大全
2014/04/10 职场文书
暑期培训班策划方案
2014/08/26 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
大班下学期个人总结
2015/02/13 职场文书
志愿者个人总结
2015/03/03 职场文书
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js
zabbix配置nginx监控的实现
2022/05/25 Servers