Using Thymeleaf to iterate cards then send value of selected card to model

Question

I'm using thymeleaf to spit out cards for all of the objects in a list but I want the user to be able to click a button on one of these cards and then let my backend know which card (baseElement.name) has been selected by sending back the name of the baseElement. This is working great with a dropdown menu instead of cards but I would much rather use cards for user experience.

In debug mode I see that selectedElementName comes back as empty string, so where I'm trying to fill it with baseElement.name doesn't seem to be working.

View:

<th:block th:each="baseElement : ${baseElements}">
   <div class="col-md">
      <form class="form-horizontal" method="post"
         th:action="@{/account/baseElementLevel}" th:object="${selectedElementName}">
         <div class="card text-center g-4">
            <div class="card-header">Base Element</div>
            <div >
               <div class="card-body">
                  <h5 class="card-title" name="selectedElementName" id="selectedElementName" th:value="${baseElement.name}" th:text="${baseElement.name}"></h5>
                  <p class="card-text" th:text="${baseElement.briefDescription}"></p>
                  <button class="btn btn-primary form-control" type="submit">Enter</button>
               </div>
            </div>
            <div class="card-footer text-muted">Entry Points:</div>
         </div>
      </form>
   </div>
</th:block>

Controller:

@RequestMapping(value = "/baseElementLevel", method = RequestMethod.GET)
public String baseElementLevel(Model model, Principal principal) {
    User user = userService.findByUsername(principal.getName());
    List<BaseElement> baseElements = elementService.findByUserUserIdAndType(user.getUserId(), "BASE");
    
    model.addAttribute("baseElements", baseElements);

    model.addAttribute("selectedElementName", "");
    model.addAttribute("baseElement", "");

    model.addAttribute("amount", "");

    return "baseElementLevel";
}

@RequestMapping(value = "/baseElementLevel", method = RequestMethod.POST)
public String baseElementLevelPOST(@ModelAttribute("amount") String amount,
        @ModelAttribute("selectedElementName") String selectedElementName, Principal principal) {
    User user = userService.findByUsername(principal.getName());

    user.setSelectedBaseElement(
            elementService.findByNameAndUserUserId(selectedElementName, user.getUserId()).getId());


    userService.save(user);

    return "redirect:/account/elementView";
}

I'm trying to display a list of elements so that each gets a card which displays the element's information and then a button on each card to post and tell the controller which card the user selected.

I can get it to work just fine if I replace cards with a select drop down but not sure how to get this lined up with cards for each list item.

Thank you for your help.

score 1 · Accepted Answer · answered Dec 21 '21 at 20:51

1

<h5 />s don't get submitted when you submit a form. you could use a hidden form element for this:

<div class="card-body">
  <h5 class="card-title" th:text="${baseElement.name}" />
  <input type="hidden" name="selectedElementName" th:value="${baseElement.name}" />
  <p class="card-text" th:text="${baseElement.briefDescription}" />
  <button class="btn btn-primary form-control" type="submit">Enter</button>
</div>

answered Dec 21 '21 at 20:51

Metroids

18,999
4
41
52

Ah that makes sense. Thank yo so much, that worked perfectly. I'm new to thymeleaf and front end development in general so I'm very grateful. That's helpful to know. I will have to look more into form submission and get an understanding of what does and does not get submitted. Thank you so much. – Chris MacIsaac Dec 22 '21 at 14:25

Using Thymeleaf to iterate cards then send value of selected card to model

1 Answers1