I am using "Thymeleaf", I want to send the value to javascript, I am new to this, I am trying below code:

onclick="getPropId('${properties.id}')"

and function

getPropId(inputID){alert(inputId);}

But I am not getting actual value.

I am using "Thymeleaf", I want to send the value to javascript, I am new to this, I am trying below code:

onclick="getPropId('${properties.id}')"

and function

getPropId(inputID){alert(inputId);}

But I am not getting actual value.

• javascript
• java
• jquery
• html
• thymeleaf

• You need to tell us what the actual value is, versus what you are expecting. My thoughts lie with the single quotes around the interpolated value – Sterling Archer Commented Oct 7, 2015 at 14:26
• Thanks for quick reply. Thmeleaf code is as below, I am iterating through "Properties" table i am displaying name and I need to get "Property.ID", and i want this ID value in my javascript function. <tr th:each="properties:${deptUnitList}"> <td th:text="${properties.name}"></td> <td><input class="button" name="Edit" type="button" value="Edit" onclick="getPropId('${properties.id}')"/></td> </tr> and javascript is </script> function getPropId(inputID){ alert(inputID); } <script type="text/javascript"> – Gururaj Mb Commented Oct 7, 2015 at 14:32
• Please edit that code into your question. Also, what debugging have you done? Are there errors? Does the inspected HTML yield the proper ID? – Sterling Archer Commented Oct 7, 2015 at 14:47
• Im Iterating via Properties table, getting the value of id using ${properties.id}, For example "1" for 1st iteration, "2" for 2nd iteration.. Now I am displaying ${properties.name} in UI webpage. It has edit button as well, while onclick of Edit button, i want to get its ID value, So in onclick event I am trying to send ${properties.id} to Javascript function "function getPropId(inputID)", here parameter 'inputID' refers 'properties.id' but ihave tried alerting it inside function, but its not showing properties.id value. no javascript error, HTML yield the proper ID properly – Gururaj Mb Commented Oct 8, 2015 at 5:58

5 Answers 5

Above issue is resolved now, we need to use Thymeleaf specific syntax.

th:onclick="'getPropId(\'' + ${properties.id} + '\');'"

Now if its displying proper properties.id in javascript function.

function getPropId(inputID){
    alert(inputID);
}                           

For passing multiple parameters, you can use the following:

th:onclick="'doSomething(\''+${val1}+ '\',\''+${val2}+'\',\''+${val3}+'\');'"

Cleaner with literal substitution ||:

th:onclick="|getPropId('${properties.id}');|"

Multiple case:

th:onclick="|getPropId('${var1}','${var2}');|"

i solved the same problemm by declaring th:attribute

<div class="row" th:each="data,i : ${obj}">
    <a href="javascript:void(0);" th:attr="onclick='loadDetails(\'' + ${data.objId}+'\')'">
</a>
</div>

Future visitors,

Let me introduce you to a easier way of doing it.

Yes you can do it with ' or with | or even with [[]] but the question is: Is it clean and easy to implement?

Most of us will waste more than 10 minutes to try to figure out the correct way to use '',,|| to make this line work.

Why not simply add data-attributes for each param and use it on the function? Something like this:

<button th:data-param1="${value}" th:data-param2="${value2}" onclick="call(this);"/>

Then the function:

<script>
  function call(e){
    const param1 = e.dataset.param1;
    const param2 = e.dataset.param2;
  }
</script>

I let you judge the better way of doing it, but keep in mind that someone may pass after you and read your code. So always try to keep it readable and easy to maintain.