thymleaf th:id value in javascript - spring

Question

Need to check format of the value of a textfield inside the Javascript.
I am using thymeleaf for rendering the page.
To achieve this I plan to use th:id and use this inside Javascript (similar to document.getElementById and read the value. But I donot know how to get the value of the textfield inside the javascript as I am doing an iteration..
Below is the scenario
While iterating through a Map<String,Field> (where Field is a class containing two elements fieldValueList (List) and timeField(boolean) check for the format of the textField entered in the page, (format of the textfield should be hh:mm:ss) need to be done in javascript. I used id for reading the value, but donot know how to get the value of the textfield inside the javascript.
The code for the page is
<fieldSet th:each="fieldKey,fieldKeyIndex : *{recipeFieldMap.keySet()}">
<div class="fieldDiv" th:each="fieldVal,field : *{recipeFieldMap[__${fieldKey}__].fieldValueList}">
<span class="fieldSpan" th:if="*{recipeFieldMap[__${fieldKey}__].timeField}">
<input type="text" th:id="|text_${fieldKeyIndex.index}_${field.index}|" th:field="*{recipeFieldMap[__${fieldKey}__].fieldTimeValueList[__${field.index}__].displayStr}" onchange="checkTimeStr()">
<script th:inline="javascript">
/*<![CDATA[*/
function checkTimeStr() {
// Something like this.. to read the value
//var value = document.getElementById('/* text_${groupKeyIndex.index}_${field.index} */').value;
//alert(value)
}
/*]]>*/
</script>
</span>
<span class="fieldSpan" th:unless="*{recipeFieldMap[__${fieldKey}__].timeField}">
<input type="text" th:field="*{recipeFieldMap[__${fieldKey}__].fieldValueList[__${field.index}__]}">
</span>
</div>
</fieldSet>
enter image description here

Answer 1

try this:
<script th:inline="javascript">
[[${field.index}]]
</script>