CODEWITHSUNDEEP
javaspringselectthymeleaf
Merušić
Merušić

Reputation: 138

How to set selected an option in Thymleaf and Spring

I have trouble when I choose an option from the dropdown list I get the information that I want but the option that I clicked doesn't stay selected. Any ideas?

 <form   th:action="@{/values/fiatCurrency} "method="post">
                                <select     name="fiatCurrency" onchange="this.form.submit()">
                                <option id="USD"    onclick="document.getElementById(this).selected = true"  value="USD"  th:text="USD"> </option>
                                <option id="EUR"    onclick="document.getElementById(this).selected = true" value="EUR" th:text="EUR"> </option>
                                <option id="CNY"     onclick="alert( 'a ') " value="CNY"  th:text="CNY"> </option>
                                </select>
                               </form>

This is the Controller class:

@Controller
public class DataController {

  private  ApiService apiService;

public DataController(ApiService apiService) {
    this.apiService = apiService;
}

@GetMapping(value = {"/values","/values/","", "/", "/index","/cryptos"} )
public String index(Model model){

    model.addAttribute("cryptos",apiService.getCrypto(100));

    return "index";
}

@PostMapping(value = "/values/fiatCurrency")
public String choseCurrency(Model model,
                            @RequestBody  String fiatCurrency) {
    String replace=fiatCurrency.replace("fiatCurrency=","");
    model.addAttribute("cryptos", apiService.getInDifferentValues(fiatCurrency));
    return "index";
}}

It always returns USD value.

Upvotes: 0

Views: 203

Answers (1)

Adina Rolea
Adina Rolea

Reputation: 2109

You are sending your fiatCurrency as a request parameter, instead of a request body. Spring has a powerful mechanism to map a view form to an actual object. This object will be send as @ModelAttribute and will be added in the model before the view is loaded.

Your form will be:

<form th:action="@{/values/fiatCurrency}" th:object="${fiat}" method="post">
    <select th:field="*{fiatCurrency}" onchange="this.form.submit()">
        <option id="USD" th:value="USD" th:text="USD"></option>
        <option id="EUR" th:value="EUR" th:text="EUR"></option>
        <option id="CNY" th:value="CNY" th:text="CNY"></option>
    </select>
</form>

The next step is to create a class Fiat to wrap your desired data:

public class Fiat {

    private String fiatCurrency;

    //getters and setters
}

The fiat object must be added in the model before the view is provided. A simple and elegant solution is to define a new method in your controller:

@ModelAttribute
public void addModelAttribute(Map<String, Object> model) {
    model.put("fiat", new Fiat());
}

Your post method will receive the newly created object : 

@PostMapping(value = "/values/fiatCurrency")
public String choseCurrency(Model model,
                            @ModelAttribute Fiat fiat) {
    //..
    return "index";
}

Upvotes: 1

Related Questions