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 相关文章推荐
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
JS实现简单路由器功能的方法
May 27 Javascript
JavaScript动态设置div的样式的方法
Dec 26 Javascript
jquery if条件语句的写法
May 19 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 Javascript
Angular中的interceptors拦截器
Jun 25 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
使用js实现单链解决前端队列问题的方法
Feb 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
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
超级强大的表单验证
2006/06/26 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
基于jquery的tab切换 js原理
2010/04/01 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
vue组件的写法汇总
2018/04/12 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
python try except 捕获所有异常的实例
2018/10/18 Python
django foreignkey(外键)的实现
2019/07/29 Python
python实现图片压缩代码实例
2019/08/12 Python
Python语言异常处理测试过程解析
2020/01/08 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
面试后的感谢信范文
2014/02/01 职场文书
英语教师自荐信
2014/05/26 职场文书
学风建设演讲稿
2014/09/12 职场文书
银行员工考核评语
2014/12/31 职场文书
入党个人总结范文
2015/03/02 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
公司市场部岗位职责
2015/04/15 职场文书
党员违纪检讨书
2015/05/05 职场文书
八年级数学教学反思
2016/02/17 职场文书