Thymeleaf：如何在表单标签外为绑定的模型对象部分赋值

该需求完全可以实现，核心是通过表单隐藏字段绑定目标属性，再通过前端交互事件修改隐藏字段值即可，具体实现步骤如下：

步骤1：修改Thymeleaf表单，添加隐藏字段绑定taskCompleted属性 #

在原有表单中新增一个type为hidden的input，用th:field绑定taskCompleted字段，默认值会自动读取后端传入的participant对象的初始值：

<form th:object="${participant}" th:action="@{/join}" method="post">
  <input type="text" th:field="*{username}" >
  <!-- 新增隐藏字段，绑定taskCompleted属性 -->
  <input type="hidden" th:field="*{taskCompleted}" id="taskCompletedInput">
  <button type="submit">Join!</button>
</form>

步骤2：编写JS监听任务完成事件，修改隐藏字段值 #

假设触发任务完成的按钮id为finishTaskBtn，添加如下JS代码：

// 监听任务完成按钮的点击事件
document.getElementById('finishTaskBtn').addEventListener('click', function() {
  // 修改隐藏字段值为true，提交时会自动封装到participant对象中
  document.getElementById('taskCompletedInput').value = 'true';
  // 可自行添加其他交互逻辑，比如提示任务完成、禁用按钮等
  this.disabled = true;
  alert('任务已完成，可以提交表单');
})

实现原理 #

Thymeleaf的th:field会自动完成属性名、默认值的绑定，表单提交时，所有带name属性的表单元素（包括隐藏字段）的值都会被自动封装到后端对应的Participant对象中，不需要额外处理参数映射。

注意事项 #

出于安全考虑，不建议完全信任前端传递的taskCompleted值，后端最好补充校验逻辑，避免用户手动修改隐藏字段的值绕过任务要求。

内容的提问来源于stack exchange，提问作者gozluklu_marti