In my .jsp-file, I have a text-field and a button. Both elements are part of a table. The table is filled through a forEach loop, which iterates over a List<WordDto> from the java-controller. Each WordDto has its own text-field and button.
The button of a WordDto should be active, if at least one of the two following conditions are met:
- A boolean in the
WordDtoisfalse - The content in the text-field does not match a
Stringin theWordDto(Initially, the text-field is filled with thatString
My current code:
<body>
<div class="container">
<%--@elvariable id="languageName" type="java.lang.String"--%>
<h1>Generated words with '${languageName}'</h1>
<table class="table">
<thead>
<tr>
<th colspan="3">Word</th>
</tr>
</thead>
<tbody>
<%--@elvariable id="words" type="java.util.List"--%>
<c:forEach items="${words}" var="singleWord" varStatus="status">
<tr>
<form:form method="post" action="word">
<input type="hidden" name="listIndex" value="${singleWord.listIndex}"/>
<input type="hidden" name="languageId" value="${singleWord.languageId}"/>
<td>
<label>
<input onchange="updateSaveState(singleWord, word.value)" type="text" name="word" value="${singleWord.word}"/>
</label>
</td>
<td>
<c:choose>
<c:when test="${singleWord.savedInDb}">
<label>Saved</label>
</c:when>
<c:otherwise>
<input type="submit" class="btn-success" value="Save"/>
</c:otherwise>
</c:choose>
</td>
</form:form>
</tr>
</c:forEach>
</tbody>
</table>
<a href="generate" class="btn">Generate new words in this language</a>
</div>
<script>
function updateSaveState(wordDto, text) {
console.log(text)
if(wordDto.word !== text)
wordDto.savedInDb = false;
}
</script>
</body>
As you can see, I tried to use onChange on the text-field to check, if the text was different. But this way I get the console error: singleWord is not defined. I also tried with onChange=${singleWord.savedInDb = false}, but then the boolean is never true, even when the texts are equal.
How can I disable the button, when the boolean is true AND the text-field is not changed?