Thymeleaf: Partially set values to model object from outside the form tags-CodePudding

I have an model object that I send to front end. I populate that object inside the form. What I want to know is that if I can partially populate that object from a different event before user submits his/her form?

Example:

Entity:

public class Participant {
  public String username;
  public boolean taskCompleted;
}

Thymeleaf Form:

<form th:object="${participant}" th:action="@{/join}" method="post">
  <input type="text" th:field="*{username}" >
  <button type="submit">Join!</button>
</form>

Before submitting the form, I give users a task, like clicking a button on a different part of the page. If they do it, I want to do something like taskCompleted = true of the same participant object. Is that possible?

CodePudding user response：

Use a hidden input in your form:

<form th:object="${participant}" method="post">
  <input type="text" th:field="*{username}" >
  <input type="hidden" th:field="*{taskCompleted}" />
  <button type="submit">Join!</button>
</form>

When the user clicks a button, use JavaScript to set the value of the hidden input to true.

<!-- This button flips the value of taskCompleted to true -->
<button onclick="document.getElementById('taskCompleted').value = 'true';">Do the task first!</button>