Submit cell data from table in thymeleaf template - thymeleaf

Question

I have following code snippet:
<table class="table">
<thead>
<tr>
<th>Type</th>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr th:if="${list.isEmpty()}">
<td colspan="2">No Media Available</td>
</tr>
<tr th:each="media : ${list}">
<form th:action="#{/pages}" method="post">
<td><span th:text="${media.getType()}">Type</span></td>
<td><span th:text="${media.getTitle()}">Title</span></td>
<td><input name="submit" type="submit" value="add"/></td>
</form>
</tr>
</tbody>
Now to my question: How can I submit the content from the rows?
Another question: Is my approach to creating a form for each row makes sense at all?

Answer 1

If you want to have user-entered data sent to the server, then replace this:
<td><span th:text="${media.getTitle()}">Title</span></td>
with this:
<td><input name="title" th:value="${media.title}"></td>
Assuming the ${media.title} evaluates to "War and Peace" This will use the name field to submit data as title=War and Peace (with URL encoding for the spaces in the title: War%20and%20Peace).
Note the use of ${media.title} instead of ${media.getTitle()}. You should be able to refer to the field name, rather than the get method. Thymeleaf will use the getFoo() method for a field called foo, based on naming conventions.
There are other approaches, for example:
use a visible input field, but styled to look and behave like regular text (cannot be edited, and has no surrounding box).
use JavaScript to replace the default form submission process, and read your row data from the vanilla table, without a form - instead, with a button using a click event handler.
If you create one form for the entire table, you're going to get all the table's data submitted at once (arrays of title data, and so on).
Alternatively, if you have one form per table row, you have to consider what happens if a user edits multiple rows of data before hitting submit for one row. All those other unsent changes will potentially be lost.
A common solution is to avoid this problem, by forcing users to update records one at a time: The table does not use forms. Each row's button click opens a new modal dialog containing the data for only that one row (in a form) - which can then be edited and submitted.