Using thymeleaf variable in onclick attribute

Question

In my current spring-boot project, I have one view with this html code:

<button type="button" class="btn btn-primary" onclick="upload()" th:utext="#{modal.save}"></button>

in the onclick attribute, the call for the function upload() should have one parameter, which value is stored in the thymeleaf variable ${gallery}.

Anyone can tell mehow to use the expression in the above command?

I already try this:

• th:onclick="upload(${gallery)"

• th:attr="onclick=upload(${gallery)"

None of this worked.

Solution 1

I solve this issue with this approach:

th:onclick="|upload('${command['class'].simpleName}', '${gallery}')|"

Solution 2

thymeleaf 3.0.10 th:onclick thymeleaf variable not working

This should work:

th:attr="onclick=|upload('${gallery}')|" 

Solution 3

This should work:

<button th:onclick="'javascript:upload(' + ${gallery} + ')'"></button>

Solution 4

In 3.0.10 version of Thymeleaf

use [[ ]] it's more easier , thymeleaf goes to inject the value in template

if the value is string no quote need

<button th:data-id="${quartzInfo.id}" 
    th:onclick="del(this,[[${quartzInfo.id}]]" type="button">
</button>

Solution 5

The older replies does not work in the new version of 3.0.10. Now you need:

<button th:data-id="${quartzInfo.id}" 
    onclick="del(this,this.getAttribute('data-id'))" type="button">
</button>

View more solutions