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的图片懒加载js
Jun 30 Javascript
juqery 学习之六 CSS--css、位置、宽高
Feb 11 Javascript
js判断字符长度以及中英文数字等
Dec 31 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
vue中使用cropperjs的方法
Mar 01 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
vue实现列表拖拽排序的功能
Nov 02 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 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用身份证号获取星座和生肖的方法
2013/11/07 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
Python enumerate遍历数组示例应用
2008/09/06 Python
python 实时遍历日志文件
2016/04/12 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
日语专业推荐信
2013/11/12 职场文书
奶茶专卖店创业计划书
2014/01/18 职场文书
《长相思》听课反思
2014/04/10 职场文书
初一学生评语大全
2014/04/24 职场文书
服务理念标语
2014/06/18 职场文书
车队安全员岗位职责
2015/02/15 职场文书
会计岗位工作总结
2015/08/12 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
使用javascript解析二维码的三种方式
2021/11/11 Javascript
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android