1. Introduction

In this tutorial, we will learn how to display/submit radio buttons in Thymeleaf by Object Oriented Programming approach. We will create a model object that will be used by input form and finally submit it back to Spring Controller.

2. Radio button group problem

Let’s assume you have a list of elements in a model object and you want to populate a group of radio buttons using Thymeleaf th:field tag. Now, if you iterate using th:each and create elements, Thymeleaf will produce a different name and id for every aspect. In that case, radio buttons will not work as a group, but all of them are independent.

3. Solution

Because we need to follow OOPs approach to solve the problem, we must not change the model object and collection. We also must use th:field to populate fields so that during input form submission actual item from the list would get updated automatically.

Now we can apply some JavaScript function that will control the radio buttons and group them. Let’s see a practical example.

4. Prepare Model Attribute

Let’s create a new entity that will hold the data required by a single radio box.

public class Month {

    private String name;
    private Boolean checked;

    // setters and getters

}

Next, we need to prepare a Model class that will contain a list of Month.

public class MonthGroup {

    private List<Month> months = new ArrayList<>();

    // setters and getters

}

Finally, we need to add MonthGroup object to Spring Model View.

modelAndView.addObject("monthGroup", new MonthGroup());

5. Prepare HTML Input Form

5.1. Preparing input form

Let’s create a new input form with MonthGroup model object.The input form will display the list of the month and contains unique names per radio button.

<form th:object="${monthGroup}" th:action="@{/radiobox-submit}" method="post">
  <div th:each="month, stat: ${monthGroup.months}">
    <input type="radio" th:field="*{months[__${stat.index}__].checked}" value="true" th:text="${month.name}">
  </div>
  <input type="submit" value="Submit">
</form>

5.2. Include JavaScript

Now, our input form is ready to process requests back to the controller, but users can select multiple radio buttons because their names are unique. Let’s write some JavaScript code to prevent users selecting multiple radio buttons.

<script>
    $(document).ready(
        function (e) {
            $("input[type=radio]").change(
                function () {
                    $('input[type=radio]:checked').not(this)
                        .prop('checked', false);
                });
        });
</script>

Now we are done with all steps, and now we can deploy and run the application.

6. Conclusion

In this tutorial, we have learned how to handle an HTML input form with radio buttons using Thymeleaf by following OOPs approach.

The complete source can be found over on GitHub.

OOPs way of Handling Radio Buttons using Thymeleaf
Tagged on:     

Satish Pandey

I am an expert Java Spring Angular developer with 10+ years of rich and varied experience in developing end-to-end Web Applications. I maintain this blog and publish articles in my free time to help the community. Email: satish@cloudtechpro.com

Leave a Reply

avatar
1024
  Subscribe  
Notify of