CODEWITHSUNDEEP
javascriptphphtmlajax
Robert
Robert

Reputation: 143

Use ajax to send a $_POST variable to php

I have a form with 2 submit buttons: 

<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>

I use ajax to print a instant feedback message:

$('#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);
    })

});

In drinksHander.php I want to see which button is pressed. If I delete 

event.preventDefault();

I can see with

$_POST["buttonDrinks"]

which button is pressed. But because of the 

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

It doesn't send which button is pressed. So how can I send a variable to drinksHandler.php which shows which button is pressed.

Upvotes: 0

Views: 51

Answers (1)

Jorge
Jorge

Reputation: 99

Remove the buttons name attr and add dynamically an input before submit. Also change the submit function to an on click button so the preventDefault should work. Something like this

$('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>

Upvotes: 4

Related Questions