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 相关文章推荐
javascript 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
javascript中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
!DOCTYPE声明对JavaScript的影响分析
Apr 12 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
javascript正则表达式总结
Feb 29 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
javascript中递归的两种写法
Jan 17 Javascript
vue事件修饰符和按键修饰符用法总结
Jul 25 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 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初学者阅读的4本经典书籍
2016/09/23 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
Python编程之属性和方法实例详解
2015/05/19 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
护理专业毕业生自我鉴定
2013/10/08 职场文书
高中毕业自我鉴定
2013/12/13 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
贷款担保书范文
2014/05/13 职场文书
公司贷款承诺书
2014/05/30 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
简爱电影观后感
2015/06/10 职场文书
学校体育节班级口号
2015/12/25 职场文书
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript
浅谈Python数学建模之整数规划
2021/06/23 Python
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python