Save Form data after redirecting Servlet error message to JSP

Question

I have a user login form which takes an error message when the password does not match the one in the database. I redirect the error message to the form as shown below, but when it shows the error message on the form it deletes the data on the email/password input fields. What can I do to still keep the data in the input fields after showing the error message? Thank you in advance.

//SERVLET REDIRECT TO JSP

request.setAttribute("errorMessage", "Wrong credentials!");
                    request.getRequestDispatcher("/Login.jsp").forward(request, response);

//JSP FORM PAGE

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<title>User Log in</title>
</head>
<body>
<form action = "LoginServlet" method="POST">
<h3>Sign In</h3><br>

Email: <input type="text" name="email" required><br>
Password: <input type="password" name="pass" required><br>
<div style="color: #FF0000;">${errorMessage}</div><br>
<input type="submit" name="submit" value="Sign in">

</form>
</body>
</html>

You either need to retrieve email and password from reguest parameters in your jsp or have the servlet put them in request attribute (like you do with error) and retrieve them in jsp after forwarding. — tsolakp, Oct 24 '18 at 15:27

score 1 · Accepted Answer · answered Oct 24 '18 at 15:28

I solved this by adding these few lines:

//SERVLET

request.setAttribute("email",request.getParameter("email"));
request.setAttribute("pass", request.getParameter("pass"));
request.setAttribute("errorMessage", "Wrong credentials!");
request.getRequestDispatcher("/Login.jsp").forward(request, response);

//JSP PAGE

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<title>User Log in</title>
<%@ include file="PageHeader.html" %>
</head>
<body>
<form action = "LoginServlet" method="POST">
<h3>Sign In</h3><br>
Email: <input type="text" name="email" required value="${email}"><br>
Password: <input type="password" name="pass" required value="${pass}"><br>
<div style="color: #FF0000;">${errorMessage}</div><br>
<input type="submit" name="submit" value="Sign in" id="sButton">

</form>
</body>
</html>

Nice. Mark as the answer when the timer lets you. Did you get to try ajax yet? — Jonathan Laliberte, Oct 24 '18 at 16:11
No, actually I haven't tried any ajax code yet but I am open to any suggestions — , Oct 24 '18 at 17:04

score 0 · Answer 2 · answered Oct 24 '18 at 17:48

Here's an example on how to achieve this with AJAX.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<title>User Log in</title>
<%@ include file="PageHeader.html" %>
<!-- you need to include jquery for this example -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
<form action = "LoginServlet" method="POST" id="someform">
<h3>Sign In</h3><br>
Email: <input type="text" name="email" required><br>
Password: <input type="password" name="pass" required><br>
<div style="color: #FF0000;display:none" id="someMsg"></div><br>
<input type="submit" name="submit" value="Sign in" id="sButton">

</form>


<script>  
    //the following will ajaxify your form, all you have to do is add 'id="someform" to it
    //reference here: https://stackoverflow.com/questions/4112686/how-to-use-servlets-and-ajax
    $(document).on("submit", "#someform", function(event) {
        var $form = $(this); 
        $.post($form.attr("action"), $form.serialize(), function(response) {
            //response is not empty (because it contains the error string message)
            if(response){
               //here we are using the response from the servlet to set the text of the div. .show() makes the element visible, .delay(1000) is a 1000ms delay for .fadeOut() which makes the element invisible after some time 
               $('#someMsg').text(response).show().delay(1000).fadeOut("slow");
            }else{
               //response here is empty (String error = "";), so we just redirect the user (because details match)
               window.location = "Welcome.jsp"; 
            }
        });
        event.preventDefault(); // Important! Prevents submitting the form.
    });
</script>

</body>
</html>

include jquery to the head:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

add id="someform" to your form

and id="someMsg" to your div (also make the display:none)

Then for your LoginServlet, try something like this:

   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {


            String pass1 = request.getParameter("pass");
            String email = request.getParameter("email");
            String error = "";

            //do whatever you need to do here, just don't do any forwarding 

            //here we check if the details are incorrect (!), javascript on the front end will decide whether to stay on the same page or redirect based on the value we send in error string.
            if(!validate(email,pass1)){
                 //if details are wrong, lets send the following string:
                 error = "Your password or email is wrong and you should feel bad.";
            }

             response.setContentType("text/plain");  // Set content type of the response so that jQuery knows what it can expect.
             response.setCharacterEncoding("UTF-8"); // You want world domination, huh?
             response.getWriter().write(error);       // Write response body.


    }

Let me know if it works for you

Yes it worked perfectly. Thank you for the suggestion. – Oct 24 '18 at 18:39 — , Oct 24 '18 at 18:39

Save Form data after redirecting Servlet error message to JSP

2 Answers2

Linked