How to pass multiple arguments in a single Javascript method using thymeleaf onclick (th:onclick)

Question

I tried the following syntax but it didn't work for me. Please let me know the answer.

Javascript Code --->

function passValue(id, name){
        
        console.log(id)
        console.log(name)
    document.getElementById("updateId").value=id; 
        }

Thymeleaf code -->

<input type="button" th:onclick="passValue(\''+${data.id}+'\', \''+${data.newEntryName} +'\')" value="Update" />

It shows an error like:

SyntaxError: Unexpected Token.

Welcome to stackoverflow! Did you check the resulting HTML in your browser? How does it look like? Is there any exception in the logs? — Wim Deblauwe, Jan 25 '22 at 07:31
Thank you, Wim; Yes, there it shows an error like; SyntaxError: Unexpected Token. — DILIP KUMAR, Jan 25 '22 at 07:35

score 1 · Answer 1 · answered Jan 25 '22 at 16:07

I recommend you do JavaScript arguments like this (notice I'm using onclick and not th:onclick):

<input  type="button"
        th:data-id="${data.id}"
        th:data-name="${data.newEntryName}"
        onclick="passValue(this.getAttribute('data-id'), this.getAttribute('data-name'));"
        value="Update" />

How to pass multiple arguments in a single Javascript method using thymeleaf onclick (th:onclick)

1 Answers1