Thymeleaf用th:field后JS无法获取表单input01元素问题

这个问题我之前也碰到过，核心原因是Thymeleaf的th:field属性会自动覆盖input的name和id属性，导致你原来的name="input01"被替换掉了，JS自然找不到对应的元素。

为什么会这样？ #

当你给input添加th:field="*{cost}"时，Thymeleaf会把这个输入框和后台Model里的对象属性做双向绑定。为了符合Spring MVC的表单提交规则，它会自动生成对应的name和id值——这里就是name="cost"、id="cost"，直接覆盖了你手动设置的name="input01"。这时候你再用document.forms["form01"]["input01"]查找元素，当然会报“undefined”的错误。

三种解决办法，按需选择： #

1. 修改JS选择器，匹配Thymeleaf生成的属性
   既然Thymeleaf把name改成了cost，直接在JS里用新的name或者id查找就行：

   // 用name查找
   document.forms["form01"]["cost"].value;
   // 或者用id查找（更可靠）
   document.getElementById("cost").value;
   

2. 手动指定name，覆盖Thymeleaf自动生成的值
   如果想保留name="input01"，同时保留Thymeleaf的绑定功能，可以用th:name显式指定name（优先级高于th:field自动生成的name）：

   <input type="text" th:field="*{cost}" th:name="input01" />
   

   这样生成的input标签name还是input01，Thymeleaf的双向绑定也能正常工作，JS代码不用改。

3. 改用th:value绑定值，放弃th:field
   如果只是需要回显后台的值，不需要Thymeleaf自动处理表单提交的绑定逻辑，可以把th:field换成th:value，同时保留原来的name：

   <input type="text" name="input01" th:value="*{cost}" />
   

   这种方式更轻量化，但如果是提交表单到后台，需要自己处理参数绑定，适合简单场景。

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