Как менять value input по кнопке +- если input text?

Question

Как менять value input по кнопке +- если input text?

Рейтинг: -2Ответов: 1Опубликовано: 23.01.2023

Есть у меня код, который вроде бы меняет значение input, но value как было первоначальным таким и остается.
Eще проблема если товаров несколько, то как цепляться за нужный input?

<div class="numeric-input" data-title="Количество">
    <div class="quantity">
        <label class="screen-reader-text" for="quantity_63ce5ab7ed66e">Количество товара адсорбер ГАЗ-31105 дв.ЗИМ-405,УМЗ-4216,Крайслер</label>
        <input id="quantity_63ce5ab7ed66e"
               type="text"
               class="input-text qty text"
               name="cart[fb60d411a5c5b72b2e7d3527cfc84fd0][qty]"
               value="1"
               title="Кол-во"
               size="4" min="0" max="1" step="1"
               placeholder=""
               inputmode="numeric"
               autocomplete="off">
    </div>
    <button class="increase" type="button">+</button>
    <button class="decrease" type="button">-</button>
</div>
<script>
document.addEventListener('click', function (e) {
    if (e.target.classList.contains("increase")) {
        ++e.target.parentElement.querySelector("input").value;
    } else if (e.target.classList.contains("decrease")) {
        --e.target.parentElement.querySelector("input").value;
    }
});
</script>

jquery

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Проблема может быть в том, что вы изменяете значение свойства value элемента input, но не обновляете состояние формы, чтобы передать измененное значение на сервер. Для этого можно использовать событие change или input для элемента input, которое отслеживает изменения значения и обновляет состояние формы.

document.addEventListener('click', function (e) {
       if (e.target.classList.contains("increase")) {
       let input = e.target.parentElement.querySelector("input");
       ++input.value;
       input.dispatchEvent(new Event('change'));
    } else if (e.target.classList.contains("decrease")) {
       let input = e.target.parentElement.querySelector("input");
       --input.value;
       input.dispatchEvent(new Event('change'));
    }
});

Для решения проблемы с множеством товаров, можно добавить класс к каждому элементу input и искать нужный используя этот класс. Или использовать идентификатор, который уникален для каждого товара.

Если вы используете jQuery, то можно использовать следующий код:

$('.increase').click(function(){
    let $input = $(this).parent().find("input");
    $input.val(parseInt($input.val()) + 1);
    $input.change();
});

$('.decrease').click(function(){
    let $input = $(this).parent().find("input");
    $input.val(parseInt($input.val()) - 1);
    $input.change();
});

В этом коде, мы используем событие click для кнопок увеличения и уменьшения, и метод val для изменения значения поля ввода. Метод change() отправляет событие change для поля ввода, так что форма может обновиться и отправить новое значение на сервер.

Как менять value input по кнопке +- если input text?

Ответы