欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-11 23:23:01
...

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