При отправке формы отследить на какую кнопку нажали и передать через ajax на сервер

Question

HTML

<form action="" id="select">
  <p class="select__title">Способ оплаты</p>
  <div class="select-btns">
    <button class="select-btn" id="pay-lk">Баланс лк</button>
    <button class="select-btn" id="pay-home">При получений</button>
  </div>
</form>

JS/JQuery

$("#select").on("submit", function (event) {
    event.preventDefault();
    const totalPrice = parseFloat(total.textContent);
    if (totalPrice === 0) {
      return;
   } else {
      $.ajax({
        type: 'POST',
        url: 'pay.php',
        data: {
          totalPrice: totalPrice,
          products: cart
        },
        success: function (response, statusText, status) {
          // console.log('Запрос успешно отправился, получаем ответ', response);
          balance.innerHTML = parseFloat(response);
          products.textContent = '';
          total.textContent = '0 Р';
        }
      });
    }
  });

Answer 1

$(".select-btns .select-btn").click(function(e) {
  $("#clicked").val(this.id);
});

$("#select").on("submit", function(e) {
  e.preventDefault();
  console.log($("#clicked").val(), e.currentTarget.id);
/*  ...
        data: {
          totalPrice: totalPrice,
          products: cart,
          button: $("#clicked").val()
        },
  ...
*/
  $("#clicked").val('');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" id="select">
  <p class="select__title">Способ оплаты</p>
  <div class="select-btns">
    <button class="select-btn" id="pay-lk">Баланс лк</button>
    <button class="select-btn" id="pay-home">При получений</button>
  </div>
  <input type="hidden" id="clicked" />
</form>

Answer 2

Через $(e.currentTarget) обращайся к кнопке

На тебе еще рефактор:

$('#select').on('submit', (e)=>{
    e.preventDefault();
    const totalPrice = parseFloat(total.textContent);
    if(!totalPrice || totalPrice === 0)return false;
    $.ajax({
        type: 'POST',
        url: 'pay.php',
        data: {
            totalPrice: totalPrice,
            button_class: $(e.currentTarget).attr('class'),
            button_id: $(e.currentTarget).attr('id'),
            products: cart
        },
        success: (response)=>{
            // console.log('Запрос успешно отправился, получаем ответ', response);
            balance.innerHTML = parseFloat(response);
            products.textContent = '';
            total.textContent = '0 Р';
        }
    });
});

БЛОГ НА HUSL

При отправке формы отследить на какую кнопку нажали и передать через ajax на сервер

Ответы (2 шт):