How to send dropdown value from the html form to the controller?

Question

index.html

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="UTF-8">
    <title>Super Spy App</title>
    </head>
    <body>
    <h1>Our Super Cool Spy App</h1>
    <h2>Create a Mission</h2>
    
    <form action="/addMission" method="post">
    <p><input type="submit" value="Create a Mission"></p>
    </form>
    
    <form action="/viewMission" method="get">
    <h2>View Missions for</h2>
    <select id="agents" name="agents">
        <option value="Johnny English">Johnny English</option>
        <option value="Natasha Romanova">Natasha Romanova</option>
        <option value="Austin Powers">Austin Powers</option>
    </select>
     <input type="submit" value="Go"> 
    </form>
    
    </body>
    </html>

ViewMissions.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>View Missions</title>
</head>
<body>

<h1> Here are the missions for</h1>

<div th:if="${missionList.empty}">

<h2>No Current Missions</h2>
</div>
<div th:unless="${missionList.empty}">

<table border="1">
<tr>
<th>Title</th>
<th>Gadget 1</th>
<th>Gadget 2</th>
<th colspan="2">Operation</th>
</tr>

<tr th:each="mission : ${missionList}">
<td th:text="${mission.title}"></td>
<td th:text="${mission.gadget1}"></td>
<td th:text="${mission.gadget2}"></td>
<td><a href="#" th:href="@{/editMission/} + ${mission.id}">edit</a></td>
<td><a href="#" th:href="@{/deleteMission/} + ${mission.id}">delete</a></td>
</tr>
</table>
</div>

<p> <a href="#" th:href="@{/}"> Back to home </a></p>
</body>
</html>

Controller Class

       @GetMapping("/")
    public String Home() {
        return "index";
    }

    @PostMapping("/addMission")
    public String addMission(Model model) {

        model.addAttribute("mission", new Mission());

        return "create_mission";
}
    
    @GetMapping("/createMission")
    public String ViewMission1(Model model) {

          
       List<Mission> mission1 = database.getMissions();
     model.addAttribute("missionList", mission1);

        return "view_missions";
}
    
    @PostMapping("/createMission")
    public String createMission(@ModelAttribute Mission mission) {

        int returnValue = database.createMission(mission);

        System.out.println(returnValue);

        return "view_missions";
}
    

   @GetMapping("/viewMission") 
  public String viewMission2(Model model) {
          
       List<Mission> mission1 = database.getMissions();
       model.addAttribute("missionList", mission1);
       return "view_missions"; 
  
   }

getMissions method

    public List<Mission> getMissions() {

    MapSqlParameterSource namedParameters = new MapSqlParameterSource();

    String query = "SELECT * FROM missions";
    
    BeanPropertyRowMapper<Mission> missionMapper = new BeanPropertyRowMapper<Mission>(Mission.class);

    List<Mission> missions = jdbc.query(query, namedParameters, missionMapper);

    return missions;

}

Mission.java (the getter setter are already set but I didn't paste them here to prevent hustle and bustle)

public class Mission {

    private Long id;
    private String agent;
    private String title;
    private String gadget1;
    private String gadget2;
}

So, in the above examples, I want to send the value selected from the dropdown list to my controller. Im my html, if I select any value from the dropdown and press 'Go' it shows me the whole database for all the 3 agents but not the particular one that I selected. Any suggestions how to curb this error. I have tried searching for a solution on internet but they were using JSP which I haven't studied yet.

You are not doing any WHERE clause in your SQL, so it seems normal that everything is returned. — Wim Deblauwe
– Wim Deblauwe, Commented Nov 10, 2020 at 9:29

Sebin Thomas · Accepted Answer · 2020-11-10 12:12:30Z

You can get the value submitted from the view to the controller in many ways. As you have a single value is passed from View to Controller you can use

@RequestParam

Your viewMission may look like this

@GetMapping("/viewMission") 
  public String viewMission2(@RequestParam@RequestParam(name = "agents", required = true) String agents, Model model) {
       List<Mission> mission1 = database.getMissions(String agents);
       
       model.addAttribute("missionList", mission1);
       return "view_missions"; 
  
   }

You have to pass the selected value to your query to filter the list based on the selected agent and your query will be

public List<Mission> getMissions(String agents) {

    MapSqlParameterSource namedParameters = new MapSqlParameterSource();

    String query = "SELECT * FROM missions WHERE agent ='" + agent +"'";
    
    BeanPropertyRowMapper<Mission> missionMapper = new BeanPropertyRowMapper<Mission>(Mission.class);

    List<Mission> missions = jdbc.query(query, namedParameters, missionMapper);

    return missions;

}

Which will filter the list.

Collectives™ on Stack Overflow

How to send dropdown value from the html form to the controller?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related