Spring – MVC Hidden Field

Spring is one of the most popular Java EE frameworks. It is an open-source lightweight framework that allows Java EE 7 developers to build simple, reliable, and scalable enterprise applications. This framework mainly focuses on providing various ways to help you manage your business objects. In this example, we will learn about the Spring MVC form Hidden field. We will create a basic Spring MVC project in the Spring tool suite(STS) to pass a hidden variable from the user form using form:hidden tag.

spring-form.tld

We can use Java Server Pages (JSPs) as a view component in Spring Framework. Spring 2.0 version provides a comprehensive set of data binding-aware tags as a tag library namely spring-form.tld for handling form elements when using JSP and Spring Web MVC.

Each tag in this tag library provides support for the set of attributes of its corresponding HTML tag counterpart, making the tags familiar and intuitive to use. These tags generate an HTML tag at the time of processing that is HTML 4.01/XHTML 1.0 compliant. We can use these tags for evaluating errors, setting themes, formatting the fields for inputting and outputting internationalized messages. To use the spring library tags, we need to include the below directive on the JSP page.

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
    --form is the tag name prefix that is used for the tags from this library.

The ‘hidden’ tag

The Spring form ‘hidden‘ tag renders an HTML ‘input’ tag with type ‘hidden’ using the bound value. If we want to submit an unbound hidden value, we need to use the HTML input tag with the type ‘hidden’.

If we want to submit non-user input from the user form, we can use the ‘hidden’ input tag. A hidden field lets the developers include some data that cannot be seen or modified by users when the form is submitted. It often stores what database record that needs to be updated when the form is submitted. The hidden value is not displayed to the user in the page’s content, but it is visible and can be edited using any browser’s developer tools.  Below is the example of the form ‘hidden’ tag.

HTML

<form:hidden path="empId" />

This tag will generate an HTML hidden tag at the time of processing like below.

HTML

<input id="empId" name="empId" type="hidden" value=""/>

Attributes in ‘hidden’ tag

Below are the attributes available in the ‘hidden’ tag.

Name	Description
htmlEscape	To enable/disable HTML escaping of rendered values.
id	To specify a unique ID for the hidden field.
path	To specify the path to the hidden field property for binding its data.
value	To specify the value for the hidden field.

Example Project

We will create a simple Spring MVC application like below to take ‘Name’ as user input, ‘Id’ as a hidden field and process them to get the output.

Spring MVC application – hidden tag example

Steps to Create Application

1) Create a Spring MVC project in Spring Tool Suite.

2) In STS while creating the project based on the developer selection, it will download all the required maven dependencies, *.jar, lib files and it will provide an embedded server.

3) Below is the final project structure of the Spring MVC project after creating *.java and *.jsp files also.

Project Structure

Implementation

Files to be created are as follows:

1. Employee.java – Bean class – To define the field properties and getter/setter methods of the properties.
2. EmployeeController.java – Controller class – To process the user request and generate the output.
3. employee.jsp – Jsp file to take input from the user.
4. summary.jsp – Jsp file to display the output to the user screen after processing the input.

1) Employee.java file: Java Bean class to define all the properties and getter/setter methods of those properties to get and set the values.

Java

package com.geeksforgeeks.app;

public class Employee {

    private String ename;
    private String eid;

    public String getEname() {
        return ename;
    }
    public void setEname(String ename) {
        this.ename = ename;
    }
    public String getEid() {
        return eid;
    }
    public void setEid(String eid) {
        this.eid = eid;
    }

}

2) EmployeeController.java file: This is the controller class where it executes the methods based on the mapping of the request URLs.

Annotations used:

• @Controller, conveys to the container that this class is the spring controller class. To use this annotation we need to import org.springframework.stereotype.Controller package.
• @RequestMapping, maps the request URLs to the specified method based on the value provided. To use this annotation, we need to import org.springframework.web.bind.annotation.RequestMapping package.
• @ModelAttribute, used to bind a method parameter or method return value to the named model attribute. We need to import org.springframework.web.bind.annotation.ModelAttribute package.

Java

package com.geeksforgeeks.app;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class EmployeeController {

    @RequestMapping(value = "/")
    public String viewHome(Model model) {

        Employee emp = new Employee();
        model.addAttribute("emp", emp);
        return "employee";
    }

    @RequestMapping(value = "/submit", method = RequestMethod.POST)
    public String submit(@ModelAttribute("emp") Employee emp) {
        return "summary";
    }

}

3) employee.jsp file: JSP file with the spring library tags with the respective implementation.

HTML

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Welcome Page</title>
</head>
<body>
    <h2>Welcome to GeeksforGeeks!!</h2>

    <form:form action="submit" method="post" modelAttribute="emp">
        <form:label path="ename">Employee Name: </form:label>
        <form:input path="ename" />
        <form:hidden path="eid" value="1002" />
        <form:button>Submit</form:button>
    </form:form>

</body>
</html>

4) summary.jsp file: This is the output JSP page to display the user entered values in the browser after processing the user input request.

HTML

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Summary page</title>
</head>
<body>

    <h3>Your Details</h3>

    <table>
        <tr>
            <td>Employee Name:</td>
            <td>${emp.ename}</td>
        </tr>
        <tr>
            <td>Employee ID:</td>
            <td>${emp.eid}</td>
        </tr>
    </table>

</body>
</html>

Execution

• After creating all the required .java and .jsp files, run the project on the server.
• Right on the Project, Run as -> Run on Server.
• Select the server in the localhost to run the application.
• Open the URL: http://localhost:8080/app/ in the browser to get the below screen.

Welcome Page

• On this page, we are taking ‘Employee Name’ as input from the user.
• The hidden field which we used in the form will not be displayed on the screen and that value will be set at the backend when the above form is submitted by the user.
• If we want to see the value of the hidden field on the browser side, we can see that using Developer tools.
• In the chrome browser, press F12 to open the developer tools like below.

Developer tools

• Now, enter the Name and click on submit.

Input

• Once, we click on submit, the form will be submitted with user-entered value and also the hidden field value provided in the code and generates the output like below.

Output

This way, if we want to submit a hidden value for an input field to the backend application or a database that is non-user input, we can use Spring form’s ‘hidden‘ tag.