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();
                }
            });
        }
    });

Моя проблема в том, что когда я нажимаю кнопку, она считывает количество, но читает только первую модель, даже если она правильно напечатана на вводе. Я даже удалил «скрытый» тип, чтобы увидеть его сам.

Как вы можете видеть - ввод печатается правильно, но когда я отлаживаю это, контроллер всегда получает значение, равное нулю, если щелкнуть по 2-й или 3-й модели, но исправить для первой и модели, которые всегда одинаковы. Это всегда «Супер Горячая Премиум».

Не могли бы вы помочь мне изменить таблицу, чтобы она считывала ввод отдельно для каждой строки и затем отправляла его на мой контроллер?

Большое спасибо.

Answer 1

Есть несколько проблем с вашим кодом:

• Вы просматриваете свою коллекцию boilers и генерируете строку для каждого цикла. Каждая строка содержит два поля ввода с одинаковыми идентификаторами: quantity и boiler_model
• в обработчике событий щелчка вы не просматриваете каждую строку для отправки данных.

Чтобы это исправить:

• Следуйте этому примеру , чтобы отслеживать состояние вашего цикла
• Использование индекса строки для генерации уникальных идентификаторов для обоих полей ввода
• Сохраните размер вашей коллекции котлов в каком-то скрытом поле, чтобы можно было отправлять данные из всех строк
• В вашем обработчике событий получите размер вашей коллекции бойлеров и получите / отправьте данные для каждой строки.

Вот предложение для вашего шаблона (обратите внимание, что я его не проверял):

<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();
                    }
                });
            }       
        }
    });
}

Answer 2

Вам необходимо отправить уникальный идентификатор, чтобы определить, на какой строке нажата кнопка , чтобы вы могли получить эти значения на своем контроллере на основе этого 'уникального идентификатора'

Например: -

<tr th:each="boiler : ${boilers}">
                   <td th:text="${boiler.uniqueID}"></td>
                    <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>


                  //Rest of your Code

<td>
<button type="submit" th:onclick="'javascript:addFunction(\'' + ${boiler.uniqueID} +'\');'" >Add</button>
</td>
</tr>