Сравните две переменные с сгенерированными числами

Question

В настоящее время я изучаю кривую PHP и впервые пытаюсь сделать AJAX-запрос к моему PHP-скрипту.Я купил корзину в своем собственном магазине для обучения, он генерирует кнопки и поля ввода с одинаковыми атрибутами «data-id» для каждой позиции.И, конечно же, поле ввода получило атрибут «значение» с текущим количеством продуктов.

Код:

Jquery:

$(document).ready(function() {
    $(".btn").click(function () {
        var id = $(this).attr("data-id");
        var idInput = $(".field").attr("data-id");
        var value = $(".field").attr("value");
        if (id === idInput) {
            $.post("/cart/addAjax/" + id, {}, function (data) {
                $("#cart-count").html(data);
            });
            $.post("/cart/addAjax/" + value, {});
            return false;
        } else {}
    });
});

Пример ввода HTML-кода, сгенерированного PHP:

            <input class="field" data-id="3" type="number" value="23">
            <button class="btn" data-id="3">Quantity</button>

            <input class="field" data-id="14" type="number" value="3">
            <button class="btn" data-id="14">Quantity</button>

            <input class="field" data-id="17" type="number" value="2">
            <button class="btn" data-id="17">Quantity</button>

            <input class="field" data-id="18" type="number" value="8">
            <button class="btn" data-id="18">Quantity</button>

            <input class="field" data-id="19" type="number" value="10">
            <button class="btn" data-id="19">Quantity</button>

Я хочу, чтобы скрипт Jquery сравнивал атрибуты ввода / кнопки "data-id" и отправлял "значение" выбранного запроса атрибута "data-id" на сторону PHP, но не знаю, как сказатьскрипт получает "значение" из выбранного "data-id", угадайте его причину, почему его POST успешно работает только для первого сгенерированного товара в корзине, для остальных товаров скрипт не работает.Может ли кто-нибудь просветить меня, как этого добиться?Спасибо за совет.

Answer 1

Вы должны структурировать ваш HTML немного лучше.

Я внес некоторые изменения в html и поместил каждые btn и field в div.

Это облегчит поиск выбранного ввода по его btn click.

Прочитайте комментарий, чтобы понять.

$(document).ready(function() {
    $(".btn").click(function () {
        var id = $(this).attr("data-id");
        // now go to the selected btn Parent, and then find the .field
        // there you are sure its the right field becouse both the button       
        // and the field is containe under one div{Parent}
        var idInput = $(this).parent().find(".field")
       console.clear();
       console.log("you Selected id " +id + " and its value is " + idInput.val())
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>

            <input class="field" data-id="3" type="number" value="23">
            <button class="btn" data-id="3">Quantity</button>
  </div> 
  <div>
            <input class="field" data-id="14" type="number" value="3">
            <button class="btn" data-id="14">Quantity</button>
   </div>
   <div>
            <input class="field" data-id="17" type="number" value="2">
            <button class="btn" data-id="17">Quantity</button>
    </div>
    <div>
            <input class="field" data-id="18" type="number" value="8">
            <button class="btn" data-id="18">Quantity</button>
   <div>
            <input class="field" data-id="19" type="number" value="10">
            <button class="btn" data-id="19">Quantity</button>
   </div>

Answer 2

$('button').on('click',function(){
  var data = $(this).data('id');
  var url = 'your php file';
  $.post(url,data,function(rdata){
    //do whatever yo want with returned data
  });
});