CODEWITHSUNDEEP
javahtmlspring-mvcthymeleaf
Kaushik Balasubramanain
Kaushik Balasubramanain

Reputation: 1258

Hidden Field Value Blank Thymeleaf

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.

View Source

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. `

Upvotes: 4

Views: 47823

Answers (5)

Steve Maring
Steve Maring

Reputation: 195

I had a situation where this worked

<input type="hidden"
       th:field="*{releaseArtifactDtos[__${itemStat.index}__].fileName}"
       th:value="${releaseArtifactDto.fileName}" />

but this did not

<input type="hidden"
       th:field="*{releaseArtifactDtos[__${itemStat.index}__].versionName}"
       th:value="${versionProperty.version.versionName}"

The input value would just show up as "value" without an assignment. I could prove a value existed by dumping out the value immediately after this.

<span th:text="${versionProperty.version.versionName}" />

It would seem that the combination of field and value in a hidden input type is a bit buggy. What ended up working for me was

<input type="hidden"
       th:attr="name='releaseArtifactDtos[' + ${itemStat.index} + '].versionName'"
       th:value="${versionProperty.version.versionName}"

Upvotes: 0

Florin Giurcă
Florin Giurcă

Reputation: 1

Supposing you have to collect a comment to a page. Then you must transmit to the controller, besides the comment, the name of the page. Ofcourse, the user don't have to re-enter the name of this page. This information must be passed to controller, but th:field only map the values entered by the user, not the values generated by default. But you can transmit the name of this page to controller as parameter in URL. In html, you have something like that:

<form  th:action="@{/saveComment(lastPage=${lastPage})}" th:object="${comments}" method="post" enctype="multipart/form-data">
        <div class="row">
 .................................................................................
            <h2>Enter your comment</h2>
            <textarea  th:field="${comments.comment}" rows="10" cols="100" name="comment" id="comment"></textarea>
            <label for="comment">Your comment here</label><br />
            <input type="submit" name ="submit" value="Submit" />
        </div>
    </form> 

In controller, you put stuff like this:

   @PostMapping("/saveComment")
    public String saveComment(Comments comments, String lastPage) {
        comments.setPage_commented(lastPage);
        commentsRepository.save(comments);
        return "redirect:/";
    }

Upvotes: 0

Victor MySon
Victor MySon

Reputation: 11

it seems Thymeleaf does not recognize the hidden fields. in order to fix it, try this:

  1. define the input as text (not as hidden).
  2. define an the style tag like "display:none" in order to hide the elements from the screen.

The result should be something like this:

<input type="text" th:field="*{parameters[${stat.index}].field}" style="display:none;">

Hope it helps.

Upvotes: 0

Govardhana Rao Ganji
Govardhana Rao Ganji

Reputation: 655

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"

Upvotes: 21

ziuu
ziuu

Reputation: 386

For me helped setting th:field (or actually name) using th:attr

th:value="${question.id}"
th:attr="name='questionIds[' + ${iter.index} + ']'"

In my example I wanted to have value from ${question} but the target in input is questionIDs[i]

In simple problem like your name=answerId should be enough.

Upvotes: 6

Related Questions