我们经常为条件查询后留下的回显数据(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>
版权声明：本文为u010003835原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。