How to target value of input field that has an id that is composed using Thymeleaf

Question

On button click I want to get the value of the input field. However, I am having trouble targeting the input field because the field id is another composed value.

I have tried this.value which appears to only pass me the req.id and not the value entered in the input field. I understand that the proper way to get an input field value is: $(selector).val()

However, the following does not work with the current implementation. $(incidentNumber+${req.id}).val()

<tr th:each="req : ${requests}">       
 <td><input th:id="incidentNumber+${req.id}" th:name="incidentNumber+${req.id}"
                       style="width:100%" type="text" th:value="${req.incidentNumber}">
<button th:value="${req.id}"class="button" type="button" onclick="validate_ticket_number(this.value)">Update</button></a>
</td>
</tr>

I expect the output to be the entered value in the "incidentNumber+${req.id}" input field

Answer 1

The right way to concatenate string is:

th:id="'incidentNumber'+${req.id}"

When you access it in Javascript (jQuery selector by Id of the element) you can't use the thyemeleaf expression, it has to be:

$('#incidentNumber100').val() // req id 100 is just an example

If you want to make it dynamic, pass the Id of the element to the target function and in the function retrieve the value using the Id.

<button th:value="${req.id}"class="button" type="button"
th:onclick="'validate_ticket_number(\'incidentNumber'+${req.id}+'\')'"> Update</button>

And then in the validate_ticket_number() function access the value using the supplied id like:

function validate_ticket_number(id){
  var value = $(id).val();
}