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.

Just as a heads-up: Visitors to this question may want to take a look at the following Thymeleaf ticket from 2018: Avoid variable expressions returning strings in event handlers. See also this question. — andrewJames
– andrewJames, Commented May 15, 2021 at 21:13

LiaNg · Accepted Answer · 2018-10-24 03:13:29Z

64

thymeleaf 3.0.10 th:onclick thymeleaf variable not working

This should work:

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

answered Oct 24, 2018 at 3:13

LiaNg

6315 silver badges2 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Flocke Over a year ago

Really? You can find th:onclick in the docs for thymleaf 3.0. I'm pretty shure the attribute isn't kicked out for version 3.0.10

Amit Over a year ago

This is the correct answer because since version 3.0.10, thymeleaf doesn't support variables of type other than Boolean and Integer inside th:onclick="...". So if you want to pass a non-boolean and non-integer argument to the onclick() method, th:onclick="..." won't work. You have to use th:attr="onclick=..." as shown in this answer.

Kleber Mota · Accepted Answer · 2015-09-24 11:59:39Z

43

I solve this issue with this approach:

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

answered Sep 24, 2015 at 11:59

Kleber Mota

9,13535 gold badges102 silver badges201 bronze badges

2 Comments

Huluvu424242 Over a year ago

At now (2020) it seems does not work anymore: Error: Only variable expressions returning numbers or booleans are allowed in this context, any other datatypes are not trusted

Huluvu424242 Over a year ago

At now the answer here its working: stackoverflow.com/a/52960571/373498

score 14 · Accepted Answer · 2016-07-22 16:44:45Z

14

This should work:

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

edited Jul 22, 2016 at 16:44

answered Sep 18, 2015 at 13:14

user178982

3 Comments

phn Over a year ago

This works perfectly but you've left out the closing brace '}'. Should be <button th:onclick="'javascript:upload(' + ${gallery} + ')'"></button>. Also you might need to enclose gallery in quotes if it is a String parameter, so <button th:onclick="'javascript:upload('\' + ${gallery} + '\')'"></button>.

user178982 Over a year ago

@phn Added the missing brace. Thanks!

Ashish Over a year ago

Thanks @cnpfm this answer is more suitable for my problem in Thymeleaf 2

Eric ABOUDARAM · Accepted Answer · 2019-09-24 14:18:41Z

12

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>

edited Sep 24, 2019 at 14:18

answered Sep 23, 2019 at 13:29

Eric ABOUDARAM

1211 silver badge4 bronze badges

2 Comments

Omebe Johnbosco Over a year ago

This worked for me!!

HokiEJP Over a year ago

This is missing the closing parentheses for the 'del' method

Leon · Accepted Answer · 2019-02-23 09:28:50Z

6

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>

answered Feb 23, 2019 at 9:28

Leon

3,25238 silver badges40 bronze badges

Comments

Guillaume Artignan · Accepted Answer · 2021-09-24 21:17:50Z

3

In fact this one is working too :

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

answered Sep 24, 2021 at 21:17

Guillaume Artignan

412 bronze badges

1 Comment

V H Over a year ago

th:attr="onclick=${'upload('''+gallery+''')'}" make it like so to wrap single quotes around the object within bracket

paradisa · Accepted Answer · 2019-10-04 16:30:58Z

2

yes it's to late, but i hope this will help people who need it

try this

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

answered Oct 4, 2019 at 16:30

paradisa

435 bronze badges

Comments

Radu Linu · Accepted Answer · 2022-03-09 17:50:47Z

0

If you are going to use attr, where there is a string the HTML will crash and you have to do the following, in case of string values.

th:attr="onclick=${'toggleContractLine('+ ''' + contract.id + ''' + ')'}"

answered Mar 9, 2022 at 17:50

Radu Linu

1,27117 silver badges34 bronze badges

1 Comment

V H Over a year ago

It might be one more of those ' this worked for me <span th:attr="onclick=${'doThis('+ '''' + user.getTestJquery() + '''' + ')'}">aaaa</span>

Collectives™ on Stack Overflow

Using thymeleaf variable in onclick attribute

8 Answers 8

2 Comments

2 Comments

3 Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

2 Comments

3 Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related