Javascript for form reset not working after being forwarded through Java Servlet

893

"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.

Share:
893

Related videos on Youtube

thotheolh
Author by

thotheolh

Updated on December 01, 2022

Comments

  • thotheolh
    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, 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 ?

    • lxyyz
      lxyyz almost 7 years
      It 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
      thotheolh almost 7 years
      Debugger did not show any errors.
    • Gurkan Yesilyurt
      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
      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
      Gurkan Yesilyurt almost 7 years
      you are welcome. @thotheolh
  • thotheolh
    thotheolh almost 7 years
    Thanks for the help anyway :) .
  • Ravindranath Akila
    Ravindranath Akila almost 7 years
    Send me your email, I'll mail you the sources of the working project. Maybe that will help.
  • thotheolh
    thotheolh almost 7 years
    Pastebin would be fine. Just put all the files on a single file.