Reputation: 7450
I have a form that has a reset button and whenever I submit the form (it's a JSP page) to a Java servlet for processing and then returning back to the JSP page, the Javascript reset function does not work.
What the reset function is doing is not only resetting the form but also resetting a character counter for the textarea in the form. Below are the code fragments
JSP page:
<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>
}
When the webpage.jsp
is first opened on the browser, the resetForm()
works nicely but when the submit button is clicked and the servlet processes the form and forwards the form back to itself, the resetForm()
javascript function fails to reset the form fields.
How should I make the resetForm()
function reset the form fields even if it has been forwarded to itself by the servlet ?
Upvotes: 0
Views: 1087
Reputation: 2675
"Form reset" resets the form-data to its initial values.
In this case, after forwarding your values, they will be initial values. If you click reset button, it is work but you can't show. Because your initial value not empty.
You can use document.getElementById('firstname').value=""; one by one.
Upvotes: 1
Reputation: 47
This works fine when tested. Once the form is submitted and comes back, re-entering data and click reset clears the form properly.
Upvotes: 0