将javascript集成到thymeleaf模板中有以下问题。下表列出了不同的输入字段，其中填充了模型中的数据。此外，对于每个输入字段，我都有一个隐藏的附加输入字段。其思想是，当我更改nothidden输入标记时，隐藏的标记将接收新的值

<tr th:each=" item : ${products}">
                            <td>
                                <input class="form-control" type="text" th:value="${item.product.name}" id="productName" name="productName" />
                            </td>
                            <td>
                                <input class="form-control" type="text" th:value="${{item.product.price}}" id="productPrice" name="productPrice" />
                            </td>
                            <td>
                                 <input class="form-control" type="text" th:onchange="substituteOnClick()" th:value="${item.quantity}" id="quantityItem" name="quantityItem" />
                            </td>
                            <td>
                                <input class="form-control" type="text" th:value="${item.MinQuantity}" th:onchange="substituteOnClick()" id="minquantityItem" name="minquantityItem" />
                            </td>

                            <td>
                                <form th:action="@{/deleteWarehouseItem/{id_del}/(id_del=${item.id})}" method="post" role="form" class="ui form">
                                <button type="submit" class="ui form" name = "itemDel" th:value="${item.id}">Löschen</button>
                                </form>
                            </td>
                            <td>
                            <form class="ui form" method="post" th:action="@{/updateItem}" >
                                <input type="hidden" name="productName_mvc" id="productName_mvc" value="0" th:value="${item.product.name}"/>
                                <input type="hidden" name="productPrice_mvc" id="productPrice_mvc" value="0" th:value="${{item.product.price}}"/>
                                <input type="hidden" name="quantityItem_mvc" id="quantityItem_mvc" value="0" th:value="${item.quantity}"/>
                                <input name="minquantityItem_mvc" id="minquantityItem_mvc" value="0" />
                                <input type="hidden" name="inventoryIdentifier_mvc" id="inventoryIdentifier_mvc" th:value="${item.id}"/>
                                <button type="submit" class="ui labeled icon button" name = "updateItem" th:text="#{management.updateItem}">

                                </button>
                            </form>
                            </td>

                        </tr>

这是我的javascript文件

function substituteOnClick() {
    var pN=document.getElementById("productName").value;
    var pP=document.getElementById("productPrice").value;
    var qI=document.getElementById("quantityItem").value;
    var MqI=document.getElementById("minquantityItem").value;

    document.getElementById("productName_mvc").value=pN;
    document.getElementById("productPrice_mvc").value=pP;
    document.getElementById("quantityItem_mvc").value=qI;
    document.getElementById("minquantityItem_mvc").value=MqI;

}

正如您所看到的，我的问题是，对于每一行，我需要两个按钮来执行不同的操作，因为我认为更改隐藏输入的值是有用的。这是可能的，因为我只在需要更新对象时才使用隐藏输入，而且它主要发生在更改事件上。但我的问题是，即使我在非隐藏输入中写入任何新内容，它也不会影响我的隐藏输入。我没有隐瞒他们中的任何一个。如何可能通过先改变其他输入中的值来改变其他输入中的值。最美好的祝福