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

来源：互联网发布：网络主播无聊编辑：程序博客网时间：2024/06/05 02:22

我们经常为条件查询后留下的回显数据(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, Chromevar 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, Chromevar 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><formaction="${pageContext.request.contextPath }/items/queryItems.action"method="post">查询条件：<table width="100%" border=1><tr><td><input type="submit" value="查询" /><input type="button"value="清空" onclick="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><ahref="${pageContext.request.contextPath }/items/editItems.action?id=${item.id}">修改</a></td><td><ahref="${pageContext.request.contextPath }/items/deleteItems.action?id=${item.id}">删除</a></td></tr></c:forEach></table></body></html>

0 0