how to set th:field thymeleaf from javascript variable

Question

I'm working with J2EE Spring boot jpa and thymeleaf I have a form (thymeleaf) when I click on an add button a table will be created dynamically with javascript, a line contains several select dropdowns how do I assign the values ​​selected in the dropdown to a thymeleaf field

the html form:

        <form th:object="${order}" method="post" th:action="@{'/order'}">
 
          <table  id="myTable2" >
          <tr id="initialRow1" class="select_row">
          <td>  <button type="button" onClick ="addRow(this)">Add</button>
                  <label> Adultes</label>
                    <select id="select8" class="select1">
     
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option
      ><option>5</option>
      <option>6</option>
    </select>
    <label>Enfatns</label>
    <select  id="idS" class="select2" onchange="myFunction()">
    <option value="0">0</option>
    <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option></select></td>
     
  
     
  
               </tr>
             </table>       
            <div class="mb-3">
                <label for="numberOfAdults">Nombre Adultes</label>
                <select  th:field="*{numberOfAdults}" class="form-select form-select-sm"
                        aria-label=".form-select-sm example">
                    <option th:each="idx: ${#numbers.sequence(0, travel.numberOfAdults)}"
                            th:value="${idx}"
                            th:text="${idx}"></option>
                </select>
            </div>
            <div class="mb-3">
                <label for="numberOfChildren">numberOfChildren</label>
                <select id="numberOfChildren" th:field="*{numberOfChildren}" class="form- 
           select form-select-sm"
                        aria-label=".form-select-sm example">
                    <option th:each="idx: ${#numbers.sequence(0, travel.numberOfChildren)}"
                            th:value="${idx}"
                            th:text="${idx}"></option>
                </select>
            </div>
            <div>
                <input type="hidden" th:field="*{travel.id}">
            </div>
            <script th:inline="javascript">
            /*<![CDATA[*/
            function sumOppositeWalls(nbrA){
              
                var table = document.getElementById('myTable2');
                var rowCount = table.rows.length;
                //alert(rowCount);
                var minusCount=0;
                for(var i=1;i<rowCount;i++){
                    nbrA=document.getElementById('id1_'+i).value;
                    alert(nbrA);
                   
                    
          }
                var wall2=document.getElementById('select8').value;
                alert(wall2);
            }/*]]>*/
            </script>
            <br>
            <button type="submit" class="btn btn-primary">Aller au sommaire
           </button>
        </form>

le javaScript

      <script th:inline="javascript">

         window. addRow = function addRow(btn) {  

        var parentRow = btn.parentNode.parentNode;
        var table = parentRow.parentNode;
        var rowCount = table.rows.length;

        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        var element1 = document.createElement("label");
        element1.type = "text";
        element1.innerHTML="Adultes :";
        cell1.appendChild(element1);


        var cell2 = row.insertCell(1);
        var element2 = document.createElement("select");
        element2.id="numberOfAdults" ;
        element2.setAttribute("th:field","*{numberOfAdults}");
          //element2.type = "select";
        var option1 = document.createElement("option");
        option1.innerHTML = "1";
        option1.value = "1";
        element2.add(option1, null);
        var option2 = document.createElement("option");
        option2.innerHTML = "2";
            option2.value = "2";
       element2.add(option2, null);
       var option2 = document.createElement("option");
      option2.innerHTML = "3";
      option2.value = "3";
      element2.add(option2, null);
      var option2 = document.createElement("option");
      option2.innerHTML = "4";
      option2.value = "4";
      element2.add(option2, null);
      var option2 = document.createElement("option");
       option2.innerHTML = "5";
       option2.value = "5";
      element2.add(option2, null);

      element2.add(option2, null);
        cell2.appendChild(element2);


         }
            </script>

enter image description here

Answer 1

i found the solution i add in the javascript code :

element2.name="numberOfAdults"; // when i create the dropdown dynamically

........

on the function where i get the value i add this code :

          function sumOppositeWalls(nbrA){
              
                var table = document.getElementById('myTable2');
                var rowCount = table.rows.length;
                //alert(rowCount);
                var minusCount=0;
                for(var i=1;i<rowCount;i++){
                    nbrA=document.getElementById('id1_'+i).value;
                    nbrE=document.getElementById('id2_'+i).value;
                    $('#numberOfAdults').val()=nbrA;
                    $('#numberOfChildren').val()=nbrb;
                    alert(nbrA);
                   
                    
          }