JavaScript_清除表单数据_条件查询

最新推荐文章于 2024-05-16 16:52:30 发布

高达一号

最新推荐文章于 2024-05-16 16:52:30 发布

阅读量4.8k

点赞数

分类专栏： JavaScript应用文章标签：回显数据清除表单数据清除 js清除表单

本文链接：https://blog.csdn.net/u010003835/article/details/50269003

版权

JavaScript应用专栏收录该内容

21 篇文章 1 订阅

订阅专栏

我们经常为条件查询后留下的回显数据(echo ) 苦恼，我们希望按一个清除按钮既可以完成对条件查询后的回显数据进行清除。

我们可以通过js代码对表单内的数据进行清除:

思路：判断表单内控件的类型，如果是要清除的类型，将对应的elements的value 直接设置为空（“”）

实现的原生js代码

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

完整的jsp页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>查询商品列表</title>
<script type="text/javascript">
	function jsClearForm(objForm){
			if(objForm == undefined)
			{
				return;
			}
			
			for(var i=0; i<objForm.elements.length; i++)
			{
				if(objForm.elements[i].type == "text")
				{
					objForm.elements[i].value = "";
				}
				else if(objForm.elements[i].type == "password")
				{
					objForm.elements[i].value = "";
				}
				else if(objForm.elements[i].type == "radio")
				{
					objForm.elements[i].checked = false;
				}
				else if(objForm.elements[i].type == "checkbox")
				{
					objForm.elements[i].checked = false;
				}
				else if(objForm.elements[i].type == "select-one")
				{
					objForm.elements[i].options[0].selected = true;
				}
				else if(objForm.elements[i].type == "select-multiple")
				{	
					for(var j = 0; j < objForm.elements[i].options.length; j++)
					{
						objForm.elements[i].options[j].selected = false;
					}
				}
				else if(objForm.elements[i].type == "file")
				{
					//formObj.elements[i].select();
					//document.selection.clear(); 			
					// for IE, Opera, Safari, Chrome
					var file = objForm.elements[i];
					 if (file.outerHTML) {
						 file.outerHTML = file.outerHTML;
					 } else {
						 file.value = "";  // FF(包括3.5)
					}
				}
				else if(objForm.elements[i].type == "textarea")
				{
					objForm.elements[i].value = "";
				}
			}
		}	
</script>
</head>
<body>
	<form
		action="${pageContext.request.contextPath }/items/queryItems.action"
		method="post">
		查询条件：
		<table width="100%" border=1>
			<tr>
				<td><input type="submit" value="查询" /><input type="button"
					value="清空" οnclick="jsClearForm(document.forms[0]);"> 商品名称<input type="text" name="name"
					value="${echoItemEx.name }" /> 商品价格<input type="text" name="price"
					value="${echoItemEx.price }" /> 商品描述<input type="text"
					name="detail" value="${echoItemEx.detail }" /></td>
			</tr>
		</table>
	</form>
		<a href="${pageContext.request.contextPath }/items/addItems.action">新增商品</a><br>
		商品列表：
		<table width="100%" border=1>
			<tr>
				<td>商品名称</td>
				<td>商品价格</td>
				<td>生产日期</td>
				<td>商品描述</td>
				<td>操作</td>
				<td>操作</td>
			</tr>
			<c:forEach items="${itemsList }" var="item">
				<tr>
					<td>${item.name }</td>
					<td>${item.price }</td>
					<td><fmt:formatDate value="${item.createtime}"
							pattern="yyyy-MM-dd HH:mm:ss" /></td>
					<td>${item.detail }</td>
					<td><a
						href="${pageContext.request.contextPath }/items/editItems.action?id=${item.id}">修改</a></td>
					<td><a
						href="${pageContext.request.contextPath }/items/deleteItems.action?id=${item.id}">删除</a></td>
				</tr>
			</c:forEach>
		</table>
</body>

</html>

高达一号

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript_清除表单数据_条件查询

我们经常为条件查询后留下的回显数据(echo ) 苦恼，我们希望按一个清除按钮既可以完成对条件查询后的回显数据进行清除。我们可以通过js代码对表单内的数据进行清除:思路：判断表单内控件的类型，如果是要清除的类型，将对应的elements的value 直接设置为空（“”）实现的原生js代码 function jsClearForm(objForm){
复制链接

扫一扫

专栏目录