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