48

I have a simple text input field where i have to set default value from one object and save its final value in other. The following code is not working.

<div th:object="${form}">
    <input class="form-control"
           type="text"
           th:value="${client.name}"  //this line is ignored
           th:field="*{clientName}"/>
</div>

form is DTO object and client is Entity object from database.

What is the correct way to solve this situation?

By not working I mean - lets say that initial values are client.name="Foo" and form.clientName=null. I need that input field display value is "Foo" and after form submission form.clientName value to become "Foo". But the input field displays nothing and on submission form.clientName value still is null;

If anyone is interested, solved this issue using following structure (found the answer in another question).

th:attr="value = ${client.name}"
3
  • Define "is not working". What exactly is happening and what should be happening?
    – Avery
    Jul 30, 2014 at 2:27
  • 1
    Why not populate the model with default value - thus moving logic away from the template and into the controller where it is probably better suited?
    – geoand
    Jul 30, 2014 at 8:55
  • 1
    I think i answered simillar problem here stackoverflow.com/questions/25808433/…
    – ziuu
    Jun 10, 2015 at 15:01

7 Answers 7

64

You could approach this method.

Instead of using th:field use html id & name. Set value using th:value

<input class="form-control"
           type="text"
           th:value="${client.name}" id="clientName" name="clientName" />

Hope this will help you

5
  • 8
    Pointing out that this will ignore the bean binding. Jun 19, 2017 at 20:56
  • 4
    So in general this is how-not-to-do things. Sep 27, 2017 at 14:16
  • @JustinSmith Can you elaborate why this solution is not a correct way.
    – want2learn
    Jan 31, 2018 at 22:11
  • This was a while ago, so it may no longer apply or be relevant, but to elaborate, th:value will set the value attribute of the input element. It does not bind the form to the bean, so if you change that field, then submit, the form data will ignore the binding. I wound up using the th:field attribute, and setting a default value from the controller. Jan 31, 2018 at 22:17
  • This is incorrect, it totally voids the effect of binding values
    – Tamb
    Apr 27, 2018 at 15:25
11

The correct approach is to use preprocessing

For example

th:field="*{__${myVar}__}"

1
2

If you don't have to come back on the page with keeping form's value, you can do that :

<form method="post" th:action="@{''}" th:object="${form}">
    <input class="form-control"
           type="text"
           th:field="${client.name}"/>

It's some kind of magic :

  • it will set the value = client.name
  • it will send back the value in the form, as 'name' field. So you would have to change your form field, 'clientName' to 'name'

If you matter keeping you form's input values, like a back on the page with an user input mistake, then you will have to do that :

<form method="post" th:action="@{''}" th:object="${form}">
    <input class="form-control"
           type="text"
           th:name="name"
           th:value="${form.name != null} ? ${form.name} : ${client.name}"/>

That means :

  • The form field name is 'name'
  • The value is taken from the form if it exists, else from the client bean. Which matches the first arrival on the page with initial value, then the forms input values if there is an error.

Without having to map your client bean to your form bean. And it works because once you submitted the form, the value arn't null but "" (empty)

2

Ok, if I am understanding the question correctly, you are trying to assign a predetermined value to a variable and then populate that variable into the html form when it is rendered by Thymeleaf. If this is what you are asking, I have been struggling with this as well for a couple of days and just found the answer after reading your post, and thought that I would share.

What I was doing (hopefully this helps someone) was trying to automatically assign a value to the id of my blog post so that when the user submits it, the blog post would automatically get that ID which I wanted to assign.

*** Problem I faced *** When I assigned the id variable like this { th:field="*{id}" }, the output was always "0" in the form input box. So I tried a variety of different way to address this like adding a th:value, and a th:name, which always resulted in the big fat "0".

So, after lots of beating my head in, and searching through forums coming up short, I found this little nugget of joy.

https://frontbackend.com/thymeleaf/hidden-inputs-in-thymeleaf

Although it did not address my specific issue, the answer was in there. Im not gonna make you read it for yourself, cause I hate that.

**** THE ANSWER ***

{In the HTML form}

 <input class="form-control" type="text" id="blog-id"  th:field="*{id}">

{In the controller}

@GetMapping("/") public String display(Model model) {

   // Create the object first 
    BlogPost blogPost = new BlogPost();

   // Then add assign the value to object
    blogPost.setId( Value You Want To Add );

   // Then send the object that you added the id to as the attribute
    model.addAttribute("blogPost", blogPost);



    return "postBlog";
}

*** Conclusion *** I cut down my code to just what you needed to see (before all the haters start in). This was my solution and it worked flawlessly. No we all know how to fix the problem

Cheers! JavaEddie

0

So what you need to do is replace th:field with th:name and add th:value, th:value will have the value of the variable you're passing across.

<div class="col-auto">
        <input type="text" th:value="${client.name}" th:name="clientName" 
        class="form control">
</div>
0
 <form method="post"  th:action="@{'/details-view/'+ ${id}}">
 <fieldset>
   <div th:each="params: ${form.getHtmlNameType()}">
       <label>
           <span th:text="${params[0]}"></span>

          <input  th:field="${__${'form.'+params[1]}__}"  th:name="${params[1]}" th:type="${params[2]}"   >

       </label>
   </div>
   <input th:type="'hidden'"  th:value="${originalReferer}" name="originalReferer" >
  </fieldset>
  <button type="post" >Save</button>
</form>
2
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Mar 9 at 2:51
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
    – M.R.Safari
    Mar 12 at 15:11
-3

It has 2 possible solutions:

1) You can set it in the view by javascript... (not recomended)

<input class="form-control"
       type="text"
       id="tbFormControll"
       th:field="*{clientName}"/>

<script type="text/javascript">
        document.getElementById("tbFormControll").value = "default";
</script>

2) Or the better solution is to set the value in the model, that you attach to the view in GET operation by a controller. You can also change the value in the controller, just make a Java object from $client.name and call setClientName.

public class FormControllModel {
    ...
    private String clientName = "default";
    public String getClientName () {
        return clientName;
    }
    public void setClientName (String value) {
        clientName = value;
    }
    ...
}

I hope it helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.