Используйте ajax для отправки переменной $ _POST в php

Question

У меня есть форма с 2 кнопками отправки:

<form id="drinksForm" action="drinksHandler.php" method="POST"> 
    <label for="drinks">Number of drinks</label> 
    <input type="number" class="form-control" name="drinks" min="1" max="30" required="required">
    <input type="submit" name="buttonDrinks" class="btn btn-success" value="Got drinks">
    <input type="submit" name="buttonDrinks" class="btn btn-danger" value="Didn't get drinks">
</form>

Я использую ajax для распечатки мгновенного сообщения обратной связи:

$('#drinksForm').submit(function(event){
    event.preventDefault();
    var form = $('#drinksForm');
    $.ajax({
        type : 'POST',
        url : form.attr('action'),
        data : form.serialize(),
    })

    .done(function(data){
        $('#result').html(data);
    })
    .fail(function(data){
        $('#result').html(data);
    })

});

В drinkHander.php я хочу увидеть, какую кнопкунажата. Если я удаляю

event.preventDefault();

, с помощью

$_POST["buttonDrinks"]

я вижу, какая кнопка нажата. Но из-за

event.preventDefault();
    $.ajax({
        type : 'POST',
        url : form.attr('action'),
        data : form.serialize(),
    })

не отправляется какая кнопка нажата. Итак, как я могу отправить переменную в drinkHandler.php, которая показывает, какая кнопка нажата.

Answer 1

Удалите кнопки с именем attr и динамически добавьте вход перед отправкой. Также измените функцию отправки на кнопку «при нажатии», чтобы функция protectDefault работала. Как то так

$('body').on('click', '.btnSubmit', function(event){
    event.preventDefault();
    var form = $('#drinksForm');
    form.append('<input type="hidden" name="buttonDrinks" value="'+$(this).val()+'">');
    
    var formData = form.serialize();
    
    console.log(formData);

    $.ajax({
        type : 'POST',
        url : form.attr('action'),
        data : formData,
    })

    .done(function(data){
        $('#result').html(data);
    })
    .fail(function(data){
        $('#result').html(data);
    })

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="drinksForm" action="drinksHandler.php" method="POST"> 
    <label for="drinks">Number of drinks</label> 
    <input type="number" class="form-control" name="drinks" min="1" max="30" required="required">
    <input type="submit" class="btn btn-success btnSubmit" value="Got drinks">
    <input type="submit" class="btn btn-danger btnSubmit" value="Didn't get drinks">
</form>