Thymeleaf/Spring - Add items to a list from a combobox to a table

Question

Situation

There is a class called 'Tool'. And this Tool class has a list of "Distribution Points".

On The User Interface:

A user selects an item (Distribution location) from a combobox aka Option(HTML) and add it to a table. Afterwards, the user click on 'submit' on the form, everything on the table is binded to a list.

Problem

Spring doesnt send the table '' items as a list. It doesnt work. Attempted several things but none of them work.

Code Snippet

    ....
<form method="POST" th:object="${tool}" th:action="@{/tools/add}">
    ....

    <!--(Distribution Points) -->
    <div class="w-100 col-md-6">
        <table id="tabledistributionPoints" class="w-100 tab" border="2" th:field="${tool.distributionPoints}">
            <tr id="head">
                <th>Distribution Point</th>
            </tr>

            <tr th:each="ponto, index: ${tool.distributionPoints}">
                <td th:value="${ponto.id}" th:field="${tool.distributionPoints[index]}" th:text="${ponto.distributionPoint}"></td>
            </tr>
        </table>

        <div class="row col-md-6">
            <select id="distributionPoint" th:object="${distributionPoints}" class="form-control">
                <option></option>
                <option th:id="${ponto.id}" th:each="ponto : ${distributionPoints}" th:value="${ponto.id}" th:text="${ponto.distributionPoint}"></option>
            </select>

            <input id="AddPonto" type="button" value="Add" name="Add" onclick="AdddistributionPoint()" />
            <input id="RemovePonto" type="button" value="Remove" name="Remove" onclick="RemovedistributionPoint()" />
        </div>
    </div>

    ....
</form>

<script>
    function AdddistributionPoint() {
        var ponto = $("#distributionPoint option:selected").text();
        var pontoId = $("#distributionPoint option:selected").attr("id");
        var pontoClean = cleanString(ponto);
        var rows = $("#tabledistributionPoints tr").length - 1;

        if (ponto.toString() !== "") {
            //
            if ($("#tabledistributionPoints").find("#" + pontoClean).length === 0) {
                var k = '<input th:field="${tool.distributionPoints[' + rows + '].id}" th:value="' + ponto + '"  th:name="${ponto.distributionPoint}" th:text="' + ponto + '" value="' + ponto + '" type="text" readonly="readonly "> </>';

                $("#tabledistributionPoints > tBody:last").append("<tr><td id=" + pontoClean + "   >" + k + "</td></tr>");
            }
        }

        $("#tabledistributionPoints").on("click", "tr", function () {
            $(this).addClass("clicked").siblings().removeClass("clicked");
        });
    }
    function RemovedistributionPoint() {
        var rowCount = $("#tabledistributionPoints tr").length;

        if (rowCount > 1) {
            var selected = $("#tabledistributionPoints > tbody > tr.clicked");

            if (selected !== null && selected.length > 0) {
                selected.remove();
            } else {
                $("#tabledistributionPoints  tr:last").remove();
            }
        }
    }
</script>

@GetMapping("/tools/add")
   public ModelAndView formadd() {
       ModelAndView mv = new ModelAndView("addtool");
 
       Tool tool = new Tool();
 
       mv.addObject(doc);
 
       mv.addObject("distributionPoints",pontoDistribuicaoDAO.findAll());
 
       return mv;
   }
 

   @RequestMapping(value = "/tools/add", method = RequestMethod.POST)
   public String salvar(tool tool) {
      
       System.out.println(tool.getdistributionPoints());
        
       this.toolDAO.save(tool);
        
       return "redirect:/tools";
   }

Ive researched a lot but im still confused. Any tip is appreciated.

References/Links read

https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#dynamic-fields

How to bind an object list with thymeleaf?

Edit:

1- The user select one item from the combobox. 2- The user clicks add 3- The selected item from the combobox goes to the table. 4- The user selects another random item from the combobox. 5- The user clicks add 6- The selected item from the combobox goes to the table.

The table has now 2 items.

The user clicks saves and these two items are saved as the items of the list 'Distribution Points'

score 1 · Accepted Answer · answered Jan 02 '21 at 16:07

1

First of all, your tag is missing name attribute.

<select id="distributionPoint" th:object="${distributionPoints}" class="form-control">

Add name = ""

Name should be same as the name of list field in your Tool class. If it is distribution_points then, inside select tag, name="distribution_points".

And, for salvar method, use @ModelAttribute annotation in the parameter.

@RequestMapping(value = "/tools/add", method = RequestMethod.POST)
   public String salvar(@ModelAttribute("tool") Tool tool) {
      
       System.out.println(tool.getdistributionPoints());
        
       this.toolDAO.save(tool);
        
       return "redirect:/tools";
   }

I hope I was able to help you.

answered Jan 02 '21 at 16:07

anurag-dhamala

524
3
10

This almost works. Thymeleaf picks the selected item from the combobox. However, I want thymeleaf to pick all the items from the table. I will update the question to explain better how it should work. – KenobiBastila Jan 02 '21 at 16:12
I got it. I added name='distributionPoints' : And now it works as it should. Amazing. Thank you so much. I cant believe it was that simple. How did you figure out this? – KenobiBastila Jan 02 '21 at 16:17
1

Haha, thanks. If you want to bind anything to your java class, just use same name, both in your form and java class field. – anurag-dhamala Jan 02 '21 at 16:20
Exactly. each line of the table is a selected item from the combobox added to the table. – KenobiBastila Jan 02 '21 at 16:21
1

Glad I was able to help you. – anurag-dhamala Jan 02 '21 at 16:23
Hey Chill, Im having the same issue again but now when the table has more than one column. – KenobiBastila Jan 11 '21 at 00:58

Thymeleaf/Spring - Add items to a list from a combobox to a table

1 Answers1

Linked