Spring MVC Form DropDown List (original) (raw)

In this article, we will learn about the Spring MVC Dropdown list. We will create a basic Spring MVC project in Spring tool suite(STS) to make a dropdown list using form:select tag.

spring-form.tld

We can use Java Server Pages (JSPs) as a view component in Spring Framework. To help you implement views using JSP, the Spring Framework provides form tag library namely spring-form.tld with some tags for evaluating errors, setting themes, formatting the fields for inputting and outputting internationalized messages.

'select' tag

The 'select' is one of the tag provided by the spring-form.tld library. It renders an HTML 'select' element and supports data-binding to the selected option. We can directly use the select tag to display the dropdown values or we can use the option tag also.

Below are the various attributes available in 'select' tag.

Attributes in 'select' tag

A. HTML Standard Attributes: HTML Standard attributes are also called as global attributes that can be used with all HTML elements.

B. HTML Event Attributes**:** HTML Event Attributes are used to trigger a function when a particular event occurred on the element.

C. HTML Optional Attributes:

D. Other HTML Attributes:

Spring MVC Application

We will be creating the below application:

Spring MVC Dropdown Example

Steps to Create an 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. SelectBean.java - Bean class - To define the field properties and getter/setter methods of the properties.
2. SelectController.java - Controller class - To process the user request and generate the output.
3. select.jsp - Jsp file to interact with the user for the input.
4. selectSummary.jsp - Jsp file to display the output after processing to the user.

A. FIle: select.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"%>

Welcome to GeeksforGeeks!

<form:form action="submit" method="post" modelAttribute="select">
    <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="education">Select your highest education: </form:label></td>
            <td><form:select id="highestEdu" path="education"
                    items="${educationDetails}" size="2"
                    cssStyle="font-family:monospace" onclick="color()">
                </form:select></td>
        <tr>
            <td><form:label path="subject">Select the subject: </form:label></td>
            <td><form:select path="subject" title="SUBJECT" multiple="true"
                    size="3">
                    <form:option value="Java" label="Java Programming" />
                    <form:option value="SQL" label="SQL language" />
                    <form:option value="Python" label="Python programming" />
                    <form:option value="JavaScript" label="JavaScript" />
                    <form:option value="PHP" label="PHP" />
                </form:select></td>
        </tr>
        <tr>
            <td><form:button>Submit</form:button></td>
        </tr>
    </table>
</form:form>
<script type="text/javascript">

    function color(){
        document.getElementById("highestEdu").style.backgroundColor = "palegreen";
    }


</script>

`

• This is the welcome page when the application runs.
• To use the Spring tags, we need to specify below spring tag library URI in the Jsp, HTML `

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

`

• If you are not including this tag library, then the container does not understands the form tags, those will become unknown tags for it.
• For proper structure of the fields, we are using table tag.
• As we discussed above, we can create a dropdown list using select tag only or we can also use option tag.
• Generally, option tag will be used when we are providing the values individually.

B. File: SelectBean.java

HTML `

package com.geek.app;

public class SelectBean {

public String name;
public String education;
public String subject;

public String getName() {
    return name;
}

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

public String getEducation() {
    return education;
}

public void setEducation(String education) {
    this.education = education;
}

public String getSubject() {
    return subject;
}

public void setSubject(String subject) {
    this.subject = subject;
}

}

`

• This is the java bean to define all the properties to store the values
• And their getter/setter methods to get and set the values of the properties.

C. SelectController.java

Java `

// Java Program to Illustrate SelectController 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 SelectController {

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

public String view(Model model)
{

    SelectBean sel = new SelectBean();
    model.addAttribute("select", sel);

    return "select";
}

// Annotation
@ModelAttribute("educationDetails")

public List<String> educationDetailsList()
{
    List<String> educationList = Arrays.asList(
        "10th class", "Intermediate", "Graduation",
        "Post Graduation");

    return educationList;
}

// Annotation
@RequestMapping(value = "/submit",
                method = RequestMethod.POST)

public String
submit(@ModelAttribute("select") SelectBean select)
{
    return "selectSummary";
}

}

`

• This is the controller class where it process the methods based on the mapping of the request URLs.
• Here, @Controller, conveys to the container that this class is the spring controller class.
• The annotation, @RequestMapping, maps the request URL's to the specified method based on the value provided.
• The annotation @ModelAttribute, to bind a method parameter or method return value to the named model attribute.

D. File: selectSummary.jsp

HTML `

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>

Hello ${select.name}, details submitted successfully!!

<span>Highest Education: </span>
<span>${select.education}</span>
<br>
<span>Subject Selected: </span>
<span>${select.subject}</span>

`

This is the output page, where we are just displaying the values selected by the user as input.

Execution:

• After creating all the required java and jsp files, run the project on the server.
• Right on the Project, Run as -> Run on the 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 - select.jsp

• As we specified different attributes to the select tag, that functionality can be seen here.

Functionality of Attributes

• Input all the fields and click on submit button.

Enter the values to submit

• Once the page is submitted, the controller class process the URL request and executes the respective method and displays below output.

Output - selectSummary.jsp