state management using hidden form field

In this post, you will learn:

  • What is a hidden form field?
  • How to manage client’s state using hidden form fields?
  • What are the differences between hidden form fields and cookies?

what is a hidden form field

A hidden form field is an invisible text field which is added to a page to persist some information between two requests. <intput type=hidden> HTML element is used to create a hidden text field. Any number of hidden text fields can be added to a form dynamically.

Differences between hidden form fields and cookies

1. Cookies can be disabled from the browser but hidden text fields can’t be.

2. Cookies can be persisted across different sessions but hidden text fields can’t be.

3. Hidden form fields can only be used when the response page has an input form. Cookie don’t have such requirements.

To test the use of hidden form fields, I have modified the application of the last example. In the modified application, the WelcomeServlet adds a hidden text field containing the user name to the response. When a request is submitted to the TourServlet using this response page, value of the hidden form field is made available as request parameter. Following diagram describes the page flow of the modified application.

hidden_form_field_page_flow

Practical example of state management using cookie:

First, the index.html :

<form method="post" action="welcomeServlet">
Name <input type="text" name="name"> <br/>
<input type="submit" value="submit">
</form>

Second the WelcomeServlet. It sends a cookie containing the user name as part of the response so that the user name can be made available to the TourServlet in the next request.

package com.techmentro.learningpad;

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class WelcomeServlet extends HttpServlet 
{
	public void doPost(HttpServletRequest request, 
			HttpServletResponse response)
			throws ServletException, IOException {
		//Value of the name request parameter is read
		String user=request.getParameter("name");
		response.setContentType("text/html");
		PrintWriter out=response.getWriter();
		out.println("Welcome, "+user);
		//An input form containing the hidden form field is added to the response
		out.println("<br><form action=tourServlet>");
		out.println("<br><input type=hidden name=userName value=\""+user+"\">");
		out.println("<br><input type=submit value=\"Take a Tour\">");
		out.println("<br></form>");
		out.close();
	}
}

Third, the TourServlet. It reads the value of hidden text field which is received as request parameter.

package com.techmentro.learningpad;

import java.io.*;

import javax.servlet.*;
import javax.servlet.http.*;

public class TourServlet extends HttpServlet 
{
	public void doGet(HttpServletRequest request, 
			HttpServletResponse response)
			throws ServletException, IOException {
		
		//value of the hidden text field which is received as parameter, is read.
		String user=request.getParameter("userName");
		response.setContentType("text/html");
		PrintWriter out=response.getWriter();
		out.println("Sorry, "+user);
		out.println("<br> Site is down for routine maintenance. Visit again later.");
		out.close();
	}
}

Fourth, the web.xml.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<servlet>
 <servlet-name>s1</servlet-name>
 <servlet-class>com.techmentro.learningpad.WelcomeServlet</servlet-class>
 </servlet>
 <servlet-mapping>
 <servlet-name>s1</servlet-name>
 <url-pattern>/welcomeServlet</url-pattern>
 </servlet-mapping>
 <servlet>
 <servlet-name>s2</servlet-name>
 <servlet-class>com.techmentro.learningpad.TourServlet</servlet-class>
 </servlet>
 <servlet-mapping>
 <servlet-name>s2</servlet-name>
 <url-pattern>/tourServlet</url-pattern>
 </servlet-mapping> 
</web-app>

Output screen images of the practical example:

The first screen represents the home page generated by index.html. Two different browsers are used to represent two different users as before.

hidden_form_field_screen1

The second screen represents the response of the WelcomeServlet. The response page contains the welcome message for the user and a submit button to send the request to the TourServlet.

hidden_form_field_screen2

The third screen represents the response of the TourServlet. The user name displayed in this response page is obtained as request parameter.

hidden_form_field_screen3

Example Source Code

If you like the post, then share it...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Leave a Reply

Your email address will not be published. Required fields are marked *