Input field is not transmitted

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>