如何使用2个按钮创建ajax查询？

Question

I have a standard form with two buttons and when you click whichever button the php if detect the button with an if statement.

<?php

include('db_config.php');

if (isset($_POST['update'])) {
    $qty = $_POST['qty'];
    $id  = $_POST['id'];


    $sql = "UPDATE orders SET qty=? WHERE id=?";
    $stmt = $conn->prepare($sql);
    $stmt->execute(array($qty,$id));

    header('Location: ../order.php');
}

if (isset($_POST['delete'])) {
    $id = $_POST['id'];

    $sql = "DELETE FROM orders WHERE id=?";
    $stmt = $conn->prepare($sql);
    $stmt->execute(array($id));
}

?>

This is my form:

<div class="col-sm-4 col-md-4">
    <div class="content-boxes style-two top-column clearfix animated flipInY" style="opacity: 1;">
        <div class="content-boxes-text">
            <form action="php/edit.php" method="post" class="form-inline pull-right editremove-form">    
                <h3>' . $row['itemName'] . '</h3>
                <h4>Total Price: $'.$row['price'].'</h4>    
                <img src="../wholesale/img/sourdough.jpg" class="img-reponsive">
                <p>Our best seller.  Full of flavour.</p>
                <div class="form-group">
                <label class="sr-only" for="exampleInputAmount">Qty</label>
                <div class="input-group">
                <input type="number" name="qty" class="form-control" class="qtyitem" value="' . $row['qty'] . '">
                </div>
                </div>
                <input type="hidden" class="itemid" name="id" value="'.$row['id'].'">
                <button type="submit" id="updatebtn" name="update" class="btn btn-primary">Update</button>
                <button type="submit" id="removebtn" name="delete" class="btn btn-primary">Remove</button>
            </form>
        </div>
        <!-- //.content-boxes-text -->
    </div>
    <!-- //.content-boxes -->
</div>

I am unsure how to pass the submit button name to the php file, or if its even possible to do it that way?

My ajax:

$(".editremove-form").on("submit",function(event){
                        event.preventDefault(); 
                        $.ajax({
                                 type: "POST",
                                 url: "php/edit.php",
                                 data: {
                                          id: $(this).find(".itemid").val(),
                                          qty: $(this).find(".qtyitem").val()
                                 },
                                 success: function(data)
                                 {
                                    $.ajax({
                                            type: 'POST',
                                            url: 'php/refreshproduct.php',
                                            data: {dateorderpicker: $('.date-picker').val()},
                                            dataType: 'JSON',
                                            success: function(data)
                                            {
                                                $("#cartrow").html(data.result_1);
                                                $("#otheritems").html(data.result_2);
                                            }
                                    });
                                 }
                            });
                    });

Thanks

Answer 1

I agree with Mani's answer "use input instead of button". to create an ajax, make an ID or some identifications to your form so you can identify your form.

your Form:

<div class="col-sm-4 col-md-4">
    <div class="content-boxes style-two top-column clearfix animated flipInY" style="opacity: 1;">
        <div class="content-boxes-text">
            <form action="php/edit.php" method="post" class="form-inline pull-right editremove-form" id="myFormID">    
                <h3>' . $row['itemName'] . '</h3>
                <h4>Total Price: $'.$row['price'].'</h4>    
                <img src="../wholesale/img/sourdough.jpg" class="img-reponsive">
                <p>Our best seller.  Full of flavour.</p>
                <div class="form-group">
                <label class="sr-only" for="exampleInputAmount">Qty</label>
                <div class="input-group">
                <input type="number" name="qty" class="form-control" class="qtyitem" value="' . $row['qty'] . '">
                </div>
                </div>
                <input type="hidden" class="itemid" name="id" value="'.$row['id'].'">
                <input type="submit" id="updatebtn" name="update" class="btn btn-primary" value="Update">
                <input type="submit" id="removebtn" name="delete" class="btn btn-primary" value="Remove">
            </form>
        </div>
        <!-- //.content-boxes-text -->
    </div>
    <!-- //.content-boxes -->
</div>

your ajax code:

$("#myFormID").submit(function(f){
    f.preventDefault(); // prevent page to load when submitting our form

    // post request
    $.post(
        'to_your_post_URL.php', 
        $(this).serialize(), // serialize form data
        function(){
            // do more after sending data
        }
    )
})

NOTE: Make sure that you include jQuery

I hope it will help