CODEWITHSUNDEEP
javascriptjavajspservlets
thotheolh
thotheolh

Reputation: 7450

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

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

Answers (2)

Gurkan Yesilyurt
Gurkan Yesilyurt

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

Ravindranath Akila
Ravindranath Akila

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

Related Questions