在百里香叶中未初始化更改属性

Question

我在将 javascript 集成到 thymeleaf 模板时遇到以下问题。 我有下表，其中包含不同的输入字段，其中填充了来自模型的数据。 此外，我为每个输入字段都有一个隐藏的附加输入字段。 想法是，当我更改非隐藏输入标签时，隐藏的输入标签将收到新值

                        <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;


}

如您所见，我的问题是，对于每一行，我需要 2 个按钮来执行不同的操作，因为我认为仅更改隐藏输入的值会很有用。这是可能的，因为我仅在需要更新对象时才使用隐藏输入，并且它主要发生在更改事件上。但我的问题是，即使我在非隐藏输入中编写任何新内容，它也不会影响我隐藏的输入。我已经通过不隐藏其中一个来检查它。 如何通过首先更改其他输入中的值来更改其他输入中的值。 最好的祝福

Answer 1

首先，您需要从该行中删除这些额外的括号

 <input class="form-control" type="text" th:value="${{item.product.price}}" id="productPrice" name="productPrice" />

然后在您的 javascript 中使用 console.log() 检查 onchange 事件是否在获取更改值

console.log("In js function");
console.log(qI);

如果你没有得到这些值，那么不要为每个输入添加一个按钮或为所有输入添加一个按钮，而不是在表单中使用单个按钮，然后使用 onClick 函数或 onsubmit 如下所示：

   <form onsubmit="return substituteOnClick()">
   <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:value="${item.quantity}" id="quantityItem" name="quantityItem" />
     </td>
     <td>
          <input class="form-control" type="text" th:value="${item.MinQuantity}" id="minquantityItem" name="minquantityItem" />
     </td>
<input type="submit" name="Submit" value="Submit"/>
</form>

如果这有帮助，请告诉我