Как определить к какой форме принадлежит input?

Question

[Denis Chelpanov]

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

<form id="form-3-<?php echo $product['id']; ?>" action="" method="POST">
      <input class="counter__remove js-counter-remove" type="submit" name="submit" value="-" onclick="removeToCartOne('<? 
             php echo $product['id'] ?>', '200', '3'); return false">
      <input type="hidden" name="productId" value="<?php echo $product['id']; ?>">
      <input type="hidden" name="taste" value="Апельсин">
      <input id="inputValue" class="counter__field inputRequired" type="text" value="<?php echo $quantityTasteThree ?>" data- 
             max="1523" name="amount">
       <div style="display:none">
             <?php echo $product['prise']; ?>
       </div>
       <input class="counter__add js-counter-add" type="submit" name="submit" value="+" onclick="addToCartOne('<?php echo 
           $product['id'] ?>', '200', '3'); return false">
</form>

Js который отвечает за изменение значения поля

$(document).ready(function() {

            var inputValue = '';
            $('.counter__field').change(function() {
                    inputValue = $(this).val();
                    alert(inputValue);
            });

        });

Проблема вот в чем, к примеру в корзине уже присутствует n-е количество данного товара, а человек вводит число меньше или больше данного количества, мне нужно будет сравнить эти числа и разницу добавлять или вычитать из общего количества. Если я в форме сделаю скрытое поле, в которое будет выводиться старое значение, то как мне потом его пулучить, как узнать к какой форме принадлежит измененный input?

Comments

[Сергей Соколов]

в коде не видно ajax запросов – там же просто <input type="submit"

Answer 1

[Сергей Соколов]

Прикрутить бы VueJS, и сделать корзину реактивной: в любой из форм изменили число товара, везде так же изменилось.

Костылинг мог бы быть с глобальным объектом, хранящим актуальную корзину. Любая из форм меняет значениеив нем. Сеттер значения эмитит событие, которе слушают все формы, чтобы обновить свои данные.

Comments

[edward_freedom]

если учить фрейм, то точно не вью, а реакт ангуляр

[Сергей Соколов]

edward_freedom, не обязательно.
Vue можно постепенно прикручивать, не переводя на него все подряд.

[edward_freedom]

Сергей Соколов, какое преимущество у вью перед реактом? Вакансий нет, если и есть, зарплата гораздо меньше чем у реакта. Создатель вью ноунейм, в отличии от реакта, за которым стоит фейсбук

[Denis Chelpanov]

Сергей Соколов, Ага, сейчас выучу фреймворк и перепишу весь код. Огромное спасибо за ответ очень помогли

[Сергей Соколов]

edward_freedom, не место обсуждать, в чём преимущества Vue, React, Angular — тема избитая.

Суть моего предложения – сделать центральный state (состояние) корзины, и однонаправленный поток данных: из View (любая из форм) -> Действие (изменить кол-во товара) -> State (обновилось кол-во) -> View (отобразилось новое количество во всех)

Это можно и самому написать и использовать любой из фреймворков и играть по его правилам.

[edward_freedom]

Сергей Соколов, это место идеальное. Раз ты посоветовал вью, то обьясни почему ты его посоветовал

[Сергей Соколов]

Denis Adamov, бэкенд вы можете менять, или только этот фронт?

Тут в первую очередь плохо, что при каждом изменении кол-ва товара вся страница перегружается. Нет никакого ajax'а – только отправка формы.

[Сергей Соколов]

edward_freedom, ах ты ж спамер оффтопегов. Пил?! признавайся.
Vue потому, что сам сейчас пилю на нём вовсю.

[Denis Chelpanov]

Сергей Соколов, ajax еще не добавил так как столкнулся с данной проблемой, но уже решил ее, добавив нужным полям динамический id который меняется в зависимости от id товара. После этого брал у исходного понля id, который соответствовал id формы и от этого уже отталкивался.

[Сергей Соколов]

Denis Adamov, лучше если будет всего одна функция-слушатель событий для нажатий на +, одна на – и одна на изменение.
Получить форму можно примерно так:

$('.counter__add').on('click', function(e) {
  e.preventDefault();
  const form = $(e.target).parent();
  const id = form.attr('id');
  // ...
});

[Сергей Соколов]

вместо id (которые должны быть уникальны на странице) лучше data-атрибуты использовать. Примерно так же:

<form data-product_id="<?php echo $product['id']; ?>">

и в обработчике события клика

const product_id = $(e.target).parent().data('id');

[Denis Chelpanov]

Сергей Соколов, возможно так и стоило было сделать, до того как я потратил два дня на создание велосипеда :(
Но вам спасибо.

Answer 2

[Владимир Мальцев]

$('.counter__field').change(function() {
                    inputValue = $(this).val();
                    alert(inputValue);
                    form = $(this).parents('form'); // Ваша форма
                   alert($(form).attr('id')) // например
            });