Thymeleaf表单提交调用JS修改按钮报无法获取DOM元素错误如何解决

问题原因 #

你存在两处代码错误，共同导致了元素获取失败：

1. JavaScript函数逻辑错误
   document.getElementById("'buttonStud'+studentId")把字符串拼接逻辑写在了引号内部，浏览器会直接查找id为字面量'buttonStud'+studentId的元素，而非你预期的buttonStud+实际学生ID的元素。
2. Thymeleaf属性写法错误

• 你在form标签写的object=student不是Thymeleaf语法，*{student.studentId}选择变量表达式需要搭配th:object属性才能生效；
• 字面量替换语法中没有正确解析学生ID变量，导致传入changeButton的参数不是实际ID值。

修正后的代码 #

第一步：修改JS函数 #

function changeButton(studentId) {
     // 移除多余引号，直接拼接按钮前缀与传入的学生ID
     const btn = document.getElementById('buttonStud' + studentId);
     btn.innerHTML = 'some text...';
     btn.disabled = true;
}

第二步：修改form标签写法 #

如果每个学生对应独立表单，正确写法如下（两种写法二选一即可）：

1. 字符串拼接写法：

<form action="/action" th:object="${student}" method="POST" th:onsubmit="'changeButton(\'' + ${student.studentId} + '\');'">
<!-- 表单内其他内容、提交按钮 -->
</form>

2. 字面量替换写法：

<form action="/action" th:object="${student}" method="POST" th:onsubmit="|changeButton('${student.studentId}');|">
<!-- 表单内其他内容、提交按钮 -->
</form>

注意：form标签不能自闭合，需要包裹内部的按钮和其他表单字段。

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