在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, Chrome var 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="浆向蓝桥易乞,药成碧海难奔。若容相访饮牛津,相对忘贫">