使用JQuery为Thymeleaf表单新增输入字段的问题排查

问题场景 #

开发Spring问卷设计应用，用户可通过Thymeleaf表单自定义添加问题数量：

• Question类核心属性为questionPrompt字符串
• Quiz类包含questionList（ArrayList类型），需将每个提交的问题存入对应索引
• 通过JQuery点击“Clone and Append”按钮克隆文本框，更新标签和ID保证唯一性
• 提交表单时，所有文本框内容被拼接成一个字符串存入同一个Question索引，无法正确绑定到List的对应位置

问题原因 #

Thymeleaf是服务器端渲染引擎，th:field属性在服务器处理后会转换为HTML的name、id等属性，浏览器端无法识别th:field。直接用JQuery修改th:field没有意义，前端生成的新元素需要设置正确的name属性，Spring MVC才能将参数绑定到List的对应索引。

解决方案 #

放弃修改th:field，直接为动态生成的input设置符合Spring MVC List绑定规则的name属性：

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Create Quiz</title>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        $(document).ready(function () {
            var questionCounter = 1;
            // 获取原始input的name格式，比如"quiz.questionList[0].questionPrompt"
            var baseName = $("#cloneContainer input").attr("name");
            // 提取前缀和后缀，用于生成新name
            var namePrefix = baseName.substring(0, baseName.lastIndexOf("[") + 1);
            var nameSuffix = baseName.substring(baseName.lastIndexOf("]"));

            $("#cloneButton").click(function () {
                var originalDiv = $("#questionContainer");
                var clonedDiv = $("#cloneContainer").clone();
                var newId = "cloneContainer" + questionCounter;
                clonedDiv.attr("id", newId);

                // 更新标签文本
                var newLabel = "Question: " + (questionCounter + 1);
                clonedDiv.find("label").text(newLabel);

                // 更新input的name和id，绑定到对应索引
                var newInputName = namePrefix + questionCounter + nameSuffix;
                var newInputId = "quiz_questionList_" + questionCounter + "_questionPrompt";
                var clonedInput = clonedDiv.find("input");
                clonedInput.attr("name", newInputName);
                clonedInput.attr("id", newInputId);
                clonedInput.val(""); // 清空输入框内容

                originalDiv.append(clonedDiv);
                questionCounter++;
            });
        });
    </script>
</head>

<body>
<form th:action="@{/api/v1/quiz/registerQuiz}" method="post" th:object="${quiz}">
    <!-- 表单绑定到quiz对象，确保Thymeleaf解析th:field -->
    <div id="cloneContainer">
        <label> Question: 1 </label> 
        <input type="text" th:field="*{questionList[0].questionPrompt}" />
    </div>
    <div id="questionContainer"></div>

    <div>
        <button type="button" id="cloneButton">Clone and Append</button>
    </div>
    <div>
        <input type="submit" value="Submit">
    </div>
</form>
</body>
</html>

关键改动说明 #

1. 表单绑定对象：为form添加th:object="${quiz}"，确保Thymeleaf能正确解析th:field表达式
2. 动态生成name属性：基于原始input的name格式，生成对应索引的name（如quiz.questionList[1].questionPrompt），Spring MVC会自动将参数绑定到List的对应位置
3. 简化克隆逻辑：直接操作DOM元素的属性，避免替换HTML内容的错误方式，同时清空克隆后的输入框内容
4. 保证ID唯一性：为每个克隆的input生成唯一ID，符合HTML规范

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