Spring - MVC Form Radio Button

Last Updated : 24 Feb, 2022

Here, we will learn about the Spring MVC radiobutton and radiobuttons tags. We will create a basic Spring MVC project in the Spring tool suite(STS) to create radiobuttons using form:radiobutton and form:radiobuttons tags.

'spring-form.tld' tag library

In Spring Framework, we can use Java Server Pages (JSPs) as a view component. From version 2.0, Spring provides a comprehensive set of data binding-aware tags for handling form elements when using JSP and Spring Web MVC.
Each tag in the spring tag library provides support for the set of attributes of its corresponding HTML tag counterpart, making the tags familiar and intuitive to use.
Spring's form tag library namely 'spring-form.tld' is integrated with Spring Web MVC, giving the tag's access to the command object and reference data your controller deals with.
The form tags make JSPs easier to develop, read and maintain.
For example: to evaluate errors, setting themes, formatting the fields for inputting and outputting internationalized messages, etc.
To use the tags from this library, we need to add the following directive at the top of the JSP page:

HTML

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

here the form is the tag name prefix that is used for the tags from this library.

'radiobutton' tag

The 'radiobutton' is one of the tag provided by the spring-form.tld library. It renders an HTML 'input' tag with type 'radio'.

HTML

<form:radiobutton path=" " value=" " label=" " />

'radiobuttons' tag

The 'radiobuttons' is one of the tag provided by the spring-form.tld library. It renders multiple HTML 'input' tags with type 'radio'.

It will involve multiple tag instances bound to the same property but with different values by passing in the available options as a runtime variable.
We can pass values as an Array, a List or a Map containing the available options in the "items" property.
If you are using a Map, the map entry key will be used as the value and the map entry's value will be used as the label to be displayed.

HTML

<form:radiobuttons path=" "    items=" " />

Spring MVC Application

We will create the below Spring MVC application to learn how to use radiobutton tags.

Steps to Create Application

Create a Spring MVC project in Spring Tool Suite.
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.
Below is the final project structure of the Spring MVC project after creating *.java and *.jsp files also.

Implementation: Files to be created are as follows:

Choice.java - Bean class - To define the properties and getter/setter methods of the properties.
ChoiceController.java - Controller class - To process the user request and generate the output.
choice.jsp - Jsp file to interact with the user for the input.
summary.jsp - Jsp file to display the output after processing to the user.

A. File: choice.jsp

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>

    <h1>Welcome to GeeksforGeeks!</h1>

    <form:form action="submit" method="post" modelAttribute="choice">
        <table>
            <tr>
                <td><form:label path="name">Enter your name: </form:label></td>
                <td><form:input path="name" /></td>
            </tr>
            <tr>
                <td><form:label path="job">Are you looking for a job now?: </form:label></td>
                <td><form:radiobutton path="job" value="Yes" label="Yes" /> <form:radiobutton
                        path="job" value="No" label="No" /></td>
            </tr>
            <tr>
                <td><form:label path="experience">Do you have work experience?: </form:label></td>
                <td><form:radiobutton path="experience" value="Yes" label="Yes"
                        onclick="enable()" /> <form:radiobutton path="experience"
                        value="No" label="No" onclick="disable()" /></td>
            </tr>
            <tr>
                <td><form:label path="years">How many years of experience you have?: </form:label></td>
                <td><form:radiobuttons id="experienceYears" path="years"
                        items="${experienceYears}" delimiter="|" /></td>
            </tr>
            <tr>
                <td><form:button>Submit</form:button></td>
            </tr>
        </table>
    </form:form>

    <script type="text/javascript">
        function enable() {
            document.getElementById("experienceYears1").disabled = false;
            document.getElementById("experienceYears2").disabled = false;
            document.getElementById("experienceYears3").disabled = false;
        }
        function disable() {
            document.getElementById("experienceYears1").disabled = true;
            document.getElementById("experienceYears2").disabled = true;
            document.getElementById("experienceYears3").disabled = true;
        }
    </script>

</body>
</html>

This is the welcome page displayed to the user when the application starts. As we discussed above, we need to include the directive - "http://www.springframework.org/tags/form" in the JSP page to use Spring form tags. In the form tag-action, method attributes are used to map the controller method that has to be executed when JSP page submits. The radiobutton and radiobuttons tags have many attributes like id, path, cssStyle, dir, value, items, etc. We can include any number of attributes based on our project requirement.

In this example, we are using the below attributes as follows:

path: To specify the path to the property that needs to be bind with the data. In this example, we have used path="experience" so that the both values - yes, no will bind to that path.
id: To provide a unique id for the property. Here, we have given the value id="experienceYears", so that all the items that are displayed under the radiobuttons tag have this unique id. As there are 3 items in the list, the id will be provided as experienceYears1, experienceYears2, experienceYears3 for the respective item values at runtime.
value: To specify the value to the particular radiobutton.
label: To display the name of the value for the radiobutton.
disabled: It is a boolean attribute to make the radiobutton disabled when the value is true. By default, the value will be false.
items: To display the radiobutton names from the list.
delimiter: To specify a delimiter to use between each 'input' tag with type 'radiobutton'. Here we are using '|' symbol as a delimiter.
onclick: It is the event attribute, where the function specified will be executed when the user clicks on the radiobutton. Here, when the user clicks on Yes, enable() function will be executed and when the user clicks on the No, disable() function will be executed.

JavaScript Functions

We are calling the javascript functions to enable/disable the radiobuttons.

Finally, when the form is submitted, the container will check the method in the controller class having the URL - "/submit" with method - "post" and it will execute it to process the request.

B. File: Choice.java

Java

// Java Program to Illustrate Choice Class

package com.geek.app;

// Class
public class Choice {

    // Class data members
    private String name;
    private String job;
    private String experience;
    private String years;

    // Getter
    public String getName() { return name; }

    // Setter
    public void setName(String name) { this.name = name; }

    // Getter
    public String getJob() { return job; }

    // Setter
    public void setJob(String job) { this.job = job; }

    // Getter
    public String getExperience() { return experience; }

    // Setter
    public void setExperience(String experience)
    {
        this.experience = experience;
    }

    // Getter
    public String getYears() { return years; }

    // Setter
    public void setYears(String years)
    {
        this.years = years;
    }
}

This is the java bean class to define the required parameters.
Here, we are defining name, job, experience, and years as parameters and their getter/setter methods to get and set the values to the respective properties.

C. File: ChoiceController.java

Java

// Java Program to illustrate ChoiceController Class

package com.geek.app;

// Importing required classes
import java.util.Arrays;
import java.util.List;
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;

// Annotation
@Controller

// Class
public class ChoiceController {

    // Annotation
    @RequestMapping(value = "/")

    public String viewPage(Model model)
    {
        Choice choice = new Choice();
        model.addAttribute("choice", choice);

        return "choice";
    }

    // Annotation
    @ModelAttribute("experienceYears")
    public List<String> experienceYears()
    {
        List<String> years = Arrays.asList(
            "1-3 Years", "3-5 years", "Above 5 Years");
        return years;
    }

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

This is the controller class where it executes the methods based on the mapping of the request URLs.
The annotation, @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.
The annotation, @RequestMapping, maps the request URL's to the specified method based on the value provided. To use this annotation, we need to import org.springframework.web.bind.annotation.RequestMapping package.
So, when the URL request comes with the value="/submit", the container will execute the submit method of this class.
The annotation @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.
The @ModelAttribute with the value "experienceYears", executes the method experienceYears to create list of items to be displayed in the radiobuttons tag.
The RequestMethod specifies the type of the request from the user whether it is a get request or post request.

D. File: summary.jsp

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>Hello ${choice.name}!!</h3>

    <span>Looking for a job: </span>
    <span>${choice.job}</span>
    <br>
    <span>Work experience: </span>
    <span>${choice.experience}</span>
    <br>
    <span>Years of experience: </span>
    <span>${choice.years}</span>

</body>
</html>

This is the output Jsp page to display the user-selected values in the browser after the processing of the request.

Execution/Output:

After creating all the required .java and .jsp files, run the project on the embedded 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.

Scenario 1: Enter the name, select the option No for Do you have work experience? field as below,

As we selected option No for Do you have work experience? field, all the radiobuttons of How many years of experience you have? the field is disabled.
Now, click on submit button to get the output.

Scenario 2: Now, select option yes for Do you have work experience? field.

As we selected option Yes for Do you have work experience? field, all the radiobuttons of How many years of experience you have? field is enabled. Select the desired option.
Click on submit button to get the output.

This way we can use the tags radiobutton and radiobuttons in the application where the user needs to choose an option and we can include different attributes based on the project requirement.

Spring - MVC Form Drop-Down List

yaminitalisetty

Improve

Article Tags :

Practice Tags :

Java

Spring - MVC Form Radio Button

'spring-form.tld' tag library

Spring MVC Application

Steps to Create Application

JavaScript Functions

Execution/Output:

Similar Reads

Thank You!

What kind of Experience do you want to share?