java - Hidden Field Value Blank Thymeleaf

Question

I have a thymeleaf form which has 2 hidden fields. I specify the value of the hidden fields using th:value, and I bind these fields to an object.

<div class="w-row">
    <div class="w-col w-col-6">
        <div class="question_text_sc">
            <p th:text="${questionVO.questionText}" />
            <p th:text="${questionVO.questionStem}" />
            <p th:text="${sequenceNo}" />
            <p th:text="${quizID}" />
        </div>
    </div>
    <div class="question_stem_sc"></div>
    <div class="w-col w-col-6">
        <div>
            <div class="w-form">
                <form class="w-clearfix" id="email-form" name="email-form" data-name="Email Form" action="#" th:action="@{/quiz/question}" th:object="${userResponseVO}" method="post">
                    <div th:each="option: ${questionVO.answerOptions}" class="w-radio radio_select" th:id="${'radio_1'}">
                        <input class="w-radio-input" id="radio" type="radio" name="answer_sc" th:field="*{answerID}" th:value="${option}"/>
                        <label class="w-form-label" id="answer_1" for="radio"><p th:text="${option}" /></label>
                    </div>
                    <input type="hidden" name="sequenceNo" th:field="*{sequenceNo}" th:value="${sequenceNo}" ></input>
                    <input type="hidden" name="quizID"  th:field="*{quizID}" th:value="${quizID}"></input>
                    <button class="button submit_answr" type="submit">Next Question</button>
                </form>

I want to bind the quizID and sequenceNo fields with the respective fields in the object. Line 6 and 7 correctly resolve the value of sequence number/quiz id and display it. However, the same value is not resolved in the th:value tag inside the form. The value is empty and nothing gets bound to the object fields.

Request your help here.

EDIT:

The code works when I remove the th:field attribute from the hidden element. But I want to bind it to an object variable, so that the server can process it. `

Answer 1

We can resolve your scenario in 2 ways

1st way:

<input type="hidden" th:value="${question.id}" th:attr="name='quizID'" />

2nd way:

<input type="hidden" th:value="${question.id}" name="quizID" />

If you used thymeleaf th:field="*{sequenceNo}", internal code of thymeleaf works like,

• It will check is there any name attribute to particular element, if it is available th:field value overrides on name attribute.

  name="sequenceNo"

• It will check is there any id attribute to particular element, if it is not available with the name of th:field value new attribute added on i.e)id.

  id="sequenceNo"