js实现清除表单的公用方法

在web项目的开发中，查询功能不可或缺。在查询表单中一般都会有两个按钮，一个是用来提交表单的查询按钮，一个是清除查询条件的清除按钮。如果查询条件较少，自己手动写个清除表单各控件输入值的js方法也未为不可，但如果查询条件多大十几个，清除各类控件输入值的代码也几乎千篇一律，看起来未免累赘，所以如果有一个公用方法供调用当然最好。在此需注意的一点是，重置按钮与清除按钮的功能是截然不同的，重置按钮是把表单中各控件的值设为默认值，而请除按钮是把值清空。

1. 因为表单中各元素值的清除方法略有差异，所以必须通过元素的type属性来获取元素的类型

<form name="userForm" method="post"><input type="text" name="username"/><input type="password" name="passwd"/><input type="radio" name="sex" value="0"/><input type="radio" name="sex" value="1"/><input type="radio" name="group" value="js"/><input type="radio" name="group" value="java"/><input type="checkbox" name="apple" value="apple1"/><input type="checkbox" name="apple" value="apple2"/><input type="checkbox" name="banana" value="banana"/><input type="checkbox" name="egg" value="egg"/><select name="country"><option value="">请选择</option><option value="cn">中国</option><option value="en">英国</option><option value="us">美国</option></select><select name="loveGirl" multiple="true"><option value="">请选择</option><option value="pjl">潘金莲</option><option value="dj">妲己</option><option value="cx">慈禧</option></select><input type="file" name="uploadFile"/><textarea name="content" rows="4" cols="20" ></textarea><input type="reset" value="重置"/><input type="button" name="clear" value="清除" οnclick="clearForm('userForm');return false;"/>
</form>

<script type="text/javascript">
function clearForm(form)
{var formObj = document.getElementsByName(form)[0];if(formObj == undefined){return;}for(var i=0; i<formObj.elements.length; i++){if(formObj.elements[i].type == "text"){formObj.elements[i].value = "";}else if(formObj.elements[i].type == "password"){formObj.elements[i].value = "";}else if(formObj.elements[i].type == "radio"){formObj.elements[i].checked = false;}else if(formObj.elements[i].type == "checkbox"){formObj.elements[i].checked = false;}else if(formObj.elements[i].type == "select-one"){formObj.elements[i].options[0].selected = true;}else if(formObj.elements[i].type == "select-multiple"){  for(var j = 0; j < formObj.elements[i].options.length; j++){formObj.elements[i].options[j].selected = false;}}else if(formObj.elements[i].type == "file"){//formObj.elements[i].select();//document.selection.clear();           // for IE, Opera, Safari, Chromevar file = formObj.elements[i];if (file.outerHTML) {file.outerHTML = file.outerHTML;} else {file.value = "";  // FF(包括3.5)}}else if(formObj.elements[i].type == "textarea"){formObj.elements[i].value = "";}}}
</script>

2. 在清除表单中file元素的值时用到了outerHMTL属性，其用法同我们经常用到的innerHTML类似，它们之间的区别如下：

innerHTML 设置或获取位于对象起始和结束标签内的 HTML
    outerHTML 设置或获取对象及其内容的 HTML 形式
    innerText 设置或获取位于对象起始和结束标签内的文本
    outerText 设置(包括标签)或获取(不包括标签)对象的文本

3. 最后奉上纳兰性德的一首词-画堂春

<div id="一生一代一双人，争教两处销魂。相思相望不相亲，天为谁春">
<div id="浆向蓝桥易乞，药成碧海难奔。若容相访饮牛津，相对忘贫">

js实现清除表单的公用方法相关推荐

js实现清除表单的方法
在web项目的开发中,查询功能不可或缺.在查询表单中一般都会有两个按钮,一个是用来提交表单的查询按钮,一个是清除查询条件的清除按钮.如果查询条件较少,自己手动写个清除表单各控件输入值的js方法也未为 ...
原生js实现form表单序列化的方法
当我们有form表单而且里面的表单元素较多时,咱们总不能一个个去获取表单元素内的值来进行拼接吧!这样会很让人蛋疼!为了方便与后台交互并且提高自己的开发效率,并且不让你蛋疼:我们一起用原生来写一个表单序 ...
JS禁止input表单元素手动输入方法(转)
第二种方法本人测试可用 1. 替代法使用隐藏的<input type="file"/>控件,然后用一个只读的文本框和一个按钮来模拟<input type=&q ...
项目开发中常用JS表单取值方法
项目开发中常用JS表单取值方法一.常用表单基本取值方法(form1为表单名称,TextBox1为控件ID,以文本框为例,html控件与web服务器控件是一样的) 1.form1.Te ...
用js将form表单同时提交到两个不同页面的方法
用js将form表单同时提交到两个不同页面的方法: <script type="text/javascript"> function dosubmit(){ windo ...
重置表单验证清除表单校验信息
重置表单验证清除表单校验信息提交表单验证的时间经常遇见的一个问题再次打开时表单验证依旧存在,这种就很烦,用户体验有点差, 在使用Vant或Element UI框架时经常会遇到,再次打开表单时,原 ...
form表单以ajax方法提交，附加额外的数据
在项目中有个添加账户的模块,如下图.填写的信息以表单是形式ajax的方法提交,但是又需要添加额外信息给后台(比如:创建人),首先要引入JQuery.js库,和jquery.form.js var op ...
vant表单点击提交没有触发验证_vant(ZanUi)结合async-validator实现表单验证的方法
感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 最近在开发一个移动端商城项目,用到了有赞的 vant ,因为最近大都采用 element ui 在做PC端的东西,对比来说,vant的完成 ...
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...

js实现清除表单的公用方法

js实现清除表单的公用方法相关推荐

最新文章

热门文章