JavaScript 不从 HTML 更新值

Question

我有一个小问题。这是我的 HTML 代码片段:

<table class="table table-striped table-hover">
    <thead>
    <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Quantity</th>
        <th>Price</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="boiler : ${boilers}">
        <td th:text="${boiler.value[0].model}"></td>
        <td th:text="${boiler.value[0].brand}">
        <td th:text="${#lists.size(boiler.value)}"></td>
        <td th:text="${boiler.value[0].price}"></td>
        <td>
            <form>
                <input type="text" th:class="boiler_model" th:id="boiler_model"
                       th:value="${boiler.value[0].model}" style="width:75px;"/>
                <input class="form-control" type="number" id="quantity" style="width: 80px"/>
            </form>
        <td>
            <button type="submit" class="btn btn-primary btn_submit" th:text="Add">Add</button>
        </td>
    </tr>
    </tbody>
</table>

这是我的 jQuery:

 $(document).ready(function () {
    $('.btn_submit').on("click", function (e) {
        e.preventDefault();
        var quantity = $("#quantity").val();
        // var boilerModel = $(".boiler_model").val();
        var boilerModel = document.getElementById('boiler_model').value;
        if (quantity === 0) {
            alert("You must fill the quantity");
        }
        else if ($.trim(boilerModel) === "") {
            alert("You must choose the model");
        }
        else {
            var productIds = [];
            $.ajax({
                type: "POST",
                url: "/order",
                data: {quantity: quantity, model: boilerModel},
                success: function (data) {
                    window.reload();
                }
            });
        }
    });

我的问题是，当我点击按钮时，它确实读取了数量，但只读取了第一个模型，即使它在输入中正确打印也是如此。我什至删除了“隐藏”类型，这样我就可以自己看到它。

如您所见 - 输入打印正确，但当我对此进行调试时，如果单击第二个或第三个模型， Controller 总是收到一个为空的数量，但对于第一个和始终相同的模型是正确的。它始终是“Super Hot Premium”。

你能帮我修改表格，让它从每一行中单独读取输入，然后将它发送到我的 Controller 吗？

非常感谢。

Answer 1

您的代码有几个问题:

• 您正在遍历 boilers 集合并为每个循环生成一行。每行包含两个具有相同 ID 的输入字段:quantity 和 boiler_model
• 在您的点击事件处理程序中，您没有遍历每一行来提交数据。

解决这个问题:

• 关注this example跟踪您的循环状态
• 使用行索引为您的两个输入字段生成唯一的 ID
• 将锅炉集合的大小存储在某个隐藏字段中，以便能够发送所有行的数据
• 在您的事件处理程序中，检索锅炉集合的大小并检索/发送每一行的数据。

这是对您的模板的建议(请注意，我还没有测试过):

<tr th:each="boiler, iterStatus : ${boilers}">
    <td th:text="${boiler.value[0].model}"></td>
    <td th:text="${boiler.value[0].brand}">
    <td th:text="${#lists.size(boiler.value)}"></td>
    <td th:text="${boiler.value[0].price}"></td>
    <td>
        <form>
            <input type="text" th:class="boiler_model" id="boiler_model_${iterStatus.index}"
                   th:value="${boiler.value[0].model}" style="width:75px;"/>
            <input class="form-control" type="number" id="quantity_${iterStatus.index}" style="width: 80px"/>
        </form>
    <td>
        <button type="submit" class="btn btn-primary btn_submit" th:text="Add">Add</button>
    </td>
</tr>
<input type="hidden" id="boilersLength" th:value="${#lists.size(boilers)}"/>

你的事件处理程序:

$(document).ready(function () {
    $('.btn_submit').on("click", function (e) {
        var quantity, boilerModel, boilersLength, i;
        e.preventDefault();

        // retrieving the length of the boilers collection
        boilersLength = $("#boilersLength").val();

        // looping and sending data for each row : 
        for (i=0;i<boilersLength;i++) {

            // retrieving data from both inputs : 
            quantity = $("#quantity_" + i).val();
            boilerModel = $("#boiler_model_" + i).val();

            if (quantity === 0) {
                alert("You must fill the quantity");
            }
            else if ($.trim(boilerModel) === "") {
                alert("You must choose the model");
            }
            else {
                var productIds = [];
                $.ajax({
                    type: "POST",
                    url: "/order",
                    data: {quantity: quantity, model: boilerModel},
                    success: function (data) {
                        // I wouldn't reload the window here, or you may reload before all data is sent 
                        // window.reload();
                    }
                });
            }       
        }
    });
}