Spring MVC, Thymeleaf - Checkbox, if checked / unchecked access endpoint of controller-CodePudding

I have a Spring MVC Thymeleaf project, and one of my page / controller displays some information.

The only interaction on that page a user can do is to check or uncheck a checkbox.

If the user does so, some logic must be executed in the controller.

I'm aiming of accessing an endpoint of the controller, if the checkbox is altered (checked / unchecked).

How to bind the checkbox to an endpoint of the controller, retrieve the value of the checkbox and execute some logic depending on the value (checked / unchecked)?

With a form, I know, it is a @PostMapping, but with a form I have normally a button the user has to click so that the form is transferred to the specified endpoint.

But how with events on elements like checkboxes?

@Controller
@Scope("session")
public class MyController {
   @GetMapping("/")
   public String show(Model model) {
      // Some logic to prepare the information
      boolean isChecked = ... depending on logic ...;
      model.addAttribute("isChecked", isChecked);
      ...
      
      // Show information on page index.html
      return "index";
   }

   @... what kind of mapping?
   public String checkboxAltered(...whatever needed..., Model model) {
      // Checked or unchecked
      if (...checkbox checked...) {
         // Checked, delete some data
      } else { 
         // Unchecked, create some data
      }
   }

   // Redirect to show information again
   return "redirect:/";
}

And how has the Thymeleaf be done on the checkbox in the page (index.html) so that this might work? Right now there is only the checkbox and depending on the attribute in the model (boolean value) it is checked / unchecked:

<input type="checkbox" th:checked="${isChecked}"/>

Now the described user event handling I have to add to the checkbox.

But, I'm not sure if this might be done that way I aim at all. If not possible, how to do it else?

The Thymeleaf documentation at https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html#checkbox-fields shows checkboxes in context of forms.

But that would mean that I have to provide a checkbox a user has to check and also a button a user has to click in addition.

CodePudding user response：

Wrap it inside of some form:

<form th:action="@{/trigger-checkbox}" method="get">
  <input type="checkbox" name="myCheckbox" th:checked="${isChecked}"/>
  <button type="submit">Submit</button>
</form>

Handle it like a parameter "myCheckbox":

@GetMapping("/trigger-checkbox")
public String checkboxAltered(@RequestParam("myCheckbox") boolean checkbox) {
    // Do whatever you want with the checkbox value
}

Feel free to use GET HTTP method if you're not changing any resources.

CodePudding user response：

If you do not want to have a submit button but want to submit the checkbox selection to your backend, you can have an event listener on the check box. On the trigger of the event, you can submit the form.