提交表单后Modal字段为空问题排查求助

1. 提交按钮未关联Modal内的表单（原始代码核心问题） #

原始代码里，Modal的「Approve」提交按钮放在modal-footer区域，不在modal-body的<form>标签范围内。点击该按钮时，并不会提交Modal内的表单，要么触发主表单提交，要么仅发送按钮自身的formaction请求，但完全没携带textarea的输入值。同时你在footer加的隐藏字段th:field="*{processApproveComment}"，绑定的是初始空值${answeredQuestionnaire.processApproveComment}，所以后端收到的自然是空。

2. Thymeleaf的th:field与th:value冲突 #

你在textarea标签里同时用了th:field="*{processApproveComment}"和th:value="${answeredQuestionnaire.processApproveComment}"。Thymeleaf中th:field优先级更高，会自动处理字段绑定、生成name属性并填充初始值，手动加th:value会干扰绑定逻辑，导致用户输入的内容无法正确关联到后端对象。

3. 唤起Modal的主按钮类型错误 #

唤起Modal的按钮是type="submit"，点击时会先触发主表单提交，而非仅弹出Modal。这会导致后端先收到一次无评论的请求，后续用户在Modal里提交时，页面状态已变化，数据绑定自然异常。

4. 更新后的代码仍残留问题 #

你把提交按钮移到form内，但没删掉th:value，也没改主按钮的type="submit"，绑定逻辑的问题依然存在。

• 确保提交按钮在表单范围内：保留你更新后的按钮位置，但去掉按钮上的data-toggle="modal"和data-target="#exampleModalCenter"，提交时不需要再唤起Modal。
• 移除th:value属性：仅保留th:field="*{processApproveComment}"，让Thymeleaf自动处理字段绑定：

  <textarea rows="5"
            placeholder="Comment..."
            th:field="*{processApproveComment}"
            class="form-control">
  </textarea>
  

• 修改主按钮类型：把唤起Modal的按钮type改为button，避免触发主表单提交：

  <button type="button" data-toggle="modal" data-target="#exampleModalCenter" class="btn btn-info" role="button">
      Approve
  </button>
  

• 删除footer中的隐藏字段：这个字段会覆盖用户输入，完全没必要保留。
• 优化Modal内的表单：直接在form标签里指定action，简化按钮逻辑：

  <div class="modal-body">
      <form method="post" action="/release/process">
          <textarea rows="5"
                    placeholder="Comment..."
                    th:field="*{processApproveComment}"
                    class="form-control">
          </textarea>
          <button type="submit" class="btn btn-info mt-3">
              Approve
          </button>
      </form>
  </div>
  

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