Getting the selected Value from Drop Down Menu - Thymeleaf + Spring Boot

I want to get the selected value from a HTML Drop Down menu. I did fill up the Drop Down Menu, but need to get the selected value from the "handlebar.html" to fill up my next Drop Down menu. Would be nice if you could tell me how to get the value, i do not really care if I have to use javascript or whatever. Would appreciate your help ^^

HTML Code:

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head> 
    <title>Getting Started: Serving Web Content</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
     <form action="#" th:action="@{/schaltung}" th:object="${String}" method="post">
        <select class="form-control" id="handlebar" name="testOrder">
            <option value="">Select Type</option>
            <option th:each="test : ${type}"
                    th:value="${test}"
                    th:text="${test}">
            </option>
        </select>
        <a href="/schaltung">
            <button>Next Step</button>
        </a>
    </form>


    <a href="index.html">Zur Startseite</a>
</body>
</html>

My Java Controller:

package com.example.servingwebcontent;

import org.apache.commons.collections4.MultiValuedMap;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;


import javax.validation.Valid;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Collection;
import java.util.List;
import java.util.Map;

@Controller
public class WebController {

    @GetMapping("/greeting")
    public String greeting(@RequestParam(name="name", required=false, defaultValue="World") String name, Model model) {
        model.addAttribute("name", name);
        return "handlebar";
    }

    @GetMapping("/handlebar")
    public String handlebar(@RequestParam(name="name", required=false) String name, Model model) throws IOException {
        ProductsWeb productsWeb = new ProductsWeb();
        List<String> list = new ArrayList<String>();
        list=productsWeb.lenkertyp();
        model.addAttribute("type", list);
        return "handlebar";
    }

    @GetMapping("/schaltung")
    public String schaltung(@RequestParam(name="name", required=false) String name, Model model) throws IOException {
        ProductsWeb productsWeb = new ProductsWeb();
        List<String> list = new ArrayList<String>();
        list=productsWeb.schaltung("");
        model.addAttribute("type", list);
        return "schaltung";
    }



    @GetMapping("/griff")
    public String griff(@RequestParam(name="name", required=false) String name, Model model) throws IOException {
        ProductsWeb productsWeb = new ProductsWeb();
        List<String> list = new ArrayList<String>();
        list=productsWeb.griff("");
        model.addAttribute("type", list);
        return "griff";
    }

    @GetMapping("/material")
    public String material(@RequestParam(name="name", required=false) String name, Model model) throws IOException {
        ProductsWeb productsWeb = new ProductsWeb();
        List<String> list = new ArrayList<String>();
        list=productsWeb.material("");
        model.addAttribute("type", list);
        return "material";
    }

    /*String s12 =null;
    @PostMapping("/handlebar")
    public String addNewType(@ModelAttribute("type") @Valid @RequestBody String type, Model model) {


        model.addAttribute("type", type);

        s12=type;
        System.out.println(s12+"1213645");


        return s12;


    }*/





}

Solution

It appears that you want your button 'Next Step' to post the form to the Java controller. As it is now, there is an anchor tag with an href wrapping the button, which is essentially the same as doing window.location='/schaltung' in JavaScript (it's changing the browser URL, but not posting the form).

To receive the form values in your controller, you need to submit the form. Try removing the <a href> tag from around your button, and set the button type to 'submit', so that your button looks like:

<button type="submit">Next Step</button>

That should submit your form and post the selected value into your Java controller.

In order for your controller to receive the parameters from the form, you will need for the receiving function to be annotated as either: @PostMapping or @RequestMapping (to receive the contents of the HTTP Body in a POST request).

In your case, change @GetMapping("/schaltung") to @PostMapping("/schaltung") or @RequestMapping("/schaltung").

In the function 'schaltung' add a RequestParam for 'testOrder' (the name of the select tag being posted):

@RequestMapping("/schaltung")
public String schaltung(@RequestParam(name="name", required=false) String name, @RequestParam String testOrder, Model model) throws IOException {
    ProductsWeb productsWeb = new ProductsWeb();
    List<String> list = new ArrayList<String>();
    list=productsWeb.schaltung("");
    model.addAttribute("type", list);
    model.addAttribute("testOrder", testOrder);
    return "schaltung";
}