I am struggling with a problem to show a form conditionally using Thymeleaf. I want to show a form as in the image below: Hide form using Thymeleaf
Initially the pick up id column should show some text like 'edit' or 'n/a' with a link and when the user clicks on the link(or button) then only the edit box should be visible as in the image.
As you can see I have already created the form but I am having trouble with hiding the form and showing it only upon clicking a link or button and when user clicks on save, the id is saved to database(already done) and the entered id should be shown instead of the form. I searched a lot about it but could not find anything using thymeleaf. I had found some related answers using JavaScript/jQuery but I need Thymeleaf.
The relevant part of the code
<td>
<a><span th:if="${ticket.pickedUp} ? ${ticket.pickUpId} : 'N/A'"></span>
<form th:action="@{/updatePickupId/{id}(id=${ticket.id})}"
th:method="post" th:style="'display: hidden'">
<div class="checkbox-list w-150px">
<input type="text" name="pId" value=""
placeholder="Pick Up Id"
th:classappend="${ticket.pickedUp} ? 'required' : ''">
<input type="submit" value="Save"/>
</div>
</form>
</a>
</td>
As you can see I have used th:style="'display: hidden'"
in the form but I don't know why its not working and the form is visible all the time.