Input field is not transmitted - html

Question

I have a table where the user can enter some values and transmit these inputs to my backend via a POST request.
Each row consists of a type, brand and some input fields like buyprice, bottom, top, and stop.
For the purpose that I can connect the input data with the backend data it is important to get the information about the brand which is unique in each row.
Because of that I implemented a hidden input field that the necessary pre-defined value.
But when I check my backend, I only receive the data about buyprice, bottom, top and stop. But nothing about the brand.
Here the relevant passage:
<td th:text="${car.getBrand()}">
<input type="text" name="brand" th:value="${car.getBrand()}" hidden>
</td>
Here the complete table (I use thymleaf as a template-engine)
<div class="container">
<br>
<h4 style="text-align: center">Please specify below</h4>
<br>
<form method="POST">
<table id="buyTable" class="table table-hover">
<thead>
<tr>
<th>Type</th>
<th scope="col">Brand</th>
<th scope="col">Buy-Price</th>
<th scope="col">Bottom</th>
<th scope="col">Top</th>
<th scope="col">Stop</th>
<th>Reduce</th>
<th>Start</th>
</tr>
</thead>
<tbody>
<tr th:each="car : ${cars}">
<td>
<select th:id="${car.getBrand()}" title="selectBuyOrSell" onchange="updateBuyTable(this)">>
<option value="buy">Buy</option>
<option value="sell">Sell</option>
</select>
</td>
<td th:text="${car.getBrand()}">
<input type="hidden" name="brand" th:value="${car.getBrand()}">
</td>
<td><input type="number" step="0.00000001" placeholder="Enter price" name="buyPrice" /></td>
<td><input type="number" step="0.00000001" placeholder="Enter bottom" name="bottom" /></td>
<td><input type="number" step="0.00000001" placeholder="Enter top" name="top" /></td>
<td><input type="number" step="0.00000001" placeholder="Enter stop" name="stop" /></td>
<td>
<label class="custom-control custom-checkbox">
<input id="clickboxReduce" type="checkbox" class="custom-control-input"
onclick="handleClickOnStart(this)" checked>
<span class="custom-control-indicator"></span>
</label>
</td>
<td>
<label class="custom-control custom-checkbox">
<input id="clickboxStart" type="checkbox" class="custom-control-input"
onclick="handleClickOnReduce(this)" checked>
<span class="custom-control-indicator"></span>
</label>
</td>
<!-- <td><input id="clickboxReduce" type="checkbox"></td>
<td><input id="clickboxStart" type="checkbox"></td>-->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a style="float:right">Select all</a></td>
<td style="text-align:center"><input type="checkbox" onclick="checkReduce(this)" checked></td>
<td style="text-align:center"><input type="checkbox" onclick="checkInstant(this)" checked></td>
</tr>
</tbody>
</table>
<br/>
<br/>
<button style="float: right!important;" class="btn btn-outline-primary">Continue</button>
<br/>
<br/>
<br/>
<table id="sellTable" class="table table-hover" hidden="true">
<thead>
<tr>
<th>Type</th>
<th>Brand</th>
<th scope="col">Sell-Price</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</form>
</div>
So it is actually only about getting the brand. Any idea?
Thank you

Answer 1

I figured out that th:text="${car.getBrand()}" within the td tag was overriding the hidden input-field.
So the solution is an a tag and a hidden input within the td tag.
<td>
<a th:text="${car.getBrand()}"></a>
<input type="hidden" name="brand" th:value="${car.getBrand()}"/>
</td>