我有一个带有重置按钮的表单，每当我将表单（它是一个JSP页面）提交给Java servlet进行处理然后返回到JSP页面时，Javascript重置功能都不起作用。
重置功能正在做的不仅是重置表单，还重置表单中textarea的字符计数器。以下是代码片段
JSP页面：
<html>
<head>
<script>
var len;
var maxLen = 400;
function countChar(val) {
len = val.value.length;
if (len >= maxLen) {
val.value = val.value.substring(0, maxLen);
} else {
document.getElementById('charNum').innerHTML = "Characters remaining: " + (maxLen - len);
}
}
;
function resetForm() {
len = 0;
document.getElementById('theForm').reset();
document.getElementById('charNum').innerHTML = "Characters remaining: " + (maxLen - len);
}
;
</script>
</head>
<body>
<div>
<table width="100%">
<tr>
<td></td>
<td align="center">
<form id="theForm" action="SomeForm" method="POST">
<table class="contactform" bgcolor="#afd977">
<tr>
<td></td>
</tr>
<tr>
<td>First Name: </td>
<td>
<%
if (request.getAttribute("result-status") != null) {
if (request.getAttribute("result-status").equals("fail")) {
out.println("<input type=\"text\" name=\"firstname\" style=\"display:table-cell; width:100%\" value=\"" + request.getParameter("firstname") + "\">");
}
} else {
out.println("<input type=\"text\" name=\"firstname\" style=\"display:table-cell; width:100%\">");
}
%>
</td>
</tr>
<tr>
<td>Last Name: </td>
<td>
<%
if (request.getAttribute("result-status") != null) {
if (request.getAttribute("result-status").equals("fail")) {
out.println("<input type=\"text\" name=\"lastname\" style=\"display:table-cell; width:100%\" value=\"" + request.getParameter("lastname") + "\">");
}
} else {
out.println("<input type=\"text\" name=\"lastname\" style=\"display:table-cell; width:100%\">");
}
%>
</td>
</tr>
<tr>
<td>Email: </td>
<td>
<%
if (request.getAttribute("result-status") != null) {
if (request.getAttribute("result-status").equals("fail")) {
out.println("<input type=\"text\" name=\"email\" style=\"display:table-cell; width:100%\" value=\"" + request.getParameter("email") + "\">");
}
} else {
out.println("<input type=\"text\" name=\"email\" style=\"display:table-cell; width:100%\">");
}
%>
</td>
</tr>
<tr>
<td style="vertical-align: top;">Message: </td>
<td>
<textarea name="msg" rows="10" cols="50" onkeyup="countChar(this)"><%
if (request.getAttribute("result-status") != null) {
if (request.getAttribute("result-status").equals("fail")) {
out.print(request.getParameter("msg"));
}
}
%></textarea>
</td>
</tr>
<tr>
<td></td>
<td align="center">
<input type="button" value="Reset" style="display:table-cell; width:50%;" onclick="resetForm()"><input type="submit" value="Submit" style="display:table-cell; width:50%;"><div id="charNum" style="font-size: 15px; padding-top: 10px;">Characters remaining: 400</div>
</td>
</tr>
</table>
</form>
</td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
的Servlet
public class SomeServlet extends HttpServlet {
private String firstname = null;
private String lastname = null;
private String email = null;
private String msg = null;
private String redirectUrl = "webpage.jsp";
/**
* Processes requests for both HTTP <code>GET</code> and <code>POST</code>
* methods.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException, MessagingException {
// Receive form information
firstname = (String) request.getParameter("firstname");
lastname = (String) request.getParameter("lastname");
email = (String) request.getParameter("email");
msg = (String) request.getParameter("msg");
// Do something
...
// Forward back to
request.getRequestDispatcher(redirectUrl).forward(request, response);
}
/**
* Handles the HTTP <code>GET</code> method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
/**
* Handles the HTTP <code>POST</code> method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
/**
* Returns a short description of the servlet.
*
* @return a String containing servlet description
*/
@Override
public String getServletInfo() {
return "Short description";
}// </editor-fold>
}
首次在浏览器上打开webpage.jsp时，resetForm()运行良好，但是当单击提交按钮并且servlet处理表单并将表单转发回自身时，{{1} javascript函数无法重置表单字段。
我应该如何使resetForm()函数重置表单字段，即使它已被servlet转发给自己？
答案 0 :(得分：1)
“表单重置”会将表单数据重置为其初始值。
在这种情况下，转发您的值后，它们将是初始值。如果单击重置按钮，它可以正常工作，但您无法显示。因为你的初始值不是空的。
您可以使用document.getElementById（'firstname'）。value =“”;一个接一个。
答案 1 :(得分：0)
测试时这很好用。提交表单并返回后，重新输入数据并单击“重置”会正确清除表单。