Javascript for form reset not working after being forwarded through Java Servlet
"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.
Related videos on Youtube
thotheolh
Updated on December 01, 2022Comments
-
thotheolh 11 months
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, theresetForm()
works nicely but when the submit button is clicked and the servlet processes the form and forwards the form back to itself, theresetForm()
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 ?-
lxyyz almost 7 yearsIt may not solve your problem, but consider move your script tags before the closing body tag (you don't want to block your dom rendering anyway). And have you opened your console for debugging?
-
thotheolh almost 7 yearsDebugger did not show any errors.
-
Gurkan Yesilyurt almost 7 years"Form reset" resets the form-data to its initial values. In this case, after forwarding your values, they 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.
-
thotheolh almost 7 years@Gurkan Yesilyurt, thanks a lot for the answer. It worked. Please reply as an answer to receive your points.
-
Gurkan Yesilyurt almost 7 yearsyou are welcome. @thotheolh
-
-
thotheolh almost 7 yearsThanks for the help anyway :) .
-
Ravindranath Akila almost 7 yearsSend me your email, I'll mail you the sources of the working project. Maybe that will help.
-
thotheolh almost 7 yearsPastebin would be fine. Just put all the files on a single file.