How to delete data to MySql from PHP using jQuery AJAX

Question

I want to delete data to MySQL from PHP using jquery ajax. But, when I reload remove.php and click remove buttons it couldn't work.

<script>
    $(document).on('click','#remove',function () {
        let id=$(this).attr('value');
        HTMLDialogElement.confirm("<h3> Are you sure you want to remove data ?</h3>",{
            ok:function () {
                $.ajax({
                    url:"remove_post.php",
                    type:"POST",
                    data:{
                        p_id:id
                    },
                    success:function (data) {         // Ithink this is an error point
        HTMLDialogElement.alert("<h3> deleted</h3>");
                    }
                })
            },
            cancel:function () {
               this.close();
            }


        });


    })


</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HomeShopping</title>
    <link rel="stylesheet" href="styles/Css.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" >
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

<div class="container-fluid">
    <div class="row px-5">
        <div class="col-md-7">
            <div class="shopping-cart">
                <h6>My Cart</h6>
                <hr>

                <?php
                include("functions/functions.php");
                $total = 0;

                $ip_add = getRealIpUser();

                $select_cart = "select * from cart where ip_add='$ip_add'";

                $run_cart = mysqli_query($conn,$select_cart);

                while($row_cart = mysqli_fetch_array($run_cart)){

                    $pro_id = $row_cart['p_id'];

                    $pro_size = $row_cart['size'];

                    $pro_quantity = $row_cart['quantity'];

                    $get_products = "select * from products where no='$pro_id'";

                    $run_products = mysqli_query($conn,$get_products);

                    while($row_products = mysqli_fetch_array($run_products)){

                        $product_title = $row_products['product_title'];

                        $product_img1 = $row_products['product_img1'];

                        $only_price = $row_products['product_price'];


                        ?>
                        <form  method="post" class="cart-items">
                            <div class="border rounded">
                                <div class="row bg-white">
                                    <div class="col-md-3 pl-0">
                                        <img src="product_images/<?php echo $product_img1; ?>" alt="Image1" class="img-fluid">
                                    </div>

                                    <div class="col-md-6">
                                        <h5 class="pt-2"><?php echo $product_title; ?></h5>
                                        <small class="text-secondary">Seller: dailytuition</small>
                                        <h5 class="pt-2"><?php echo $only_price; ?></h5>
                                        <button type="submit" class="btn btn-warning">Save for Later</button>
                                        <button id="<?php echo $pro_id;?>" type="submit" class="btn btn-danger mx-2" name="remove" value="<?php echo $pro_id;?>">Remove</button>
                                    </div>

                                    <div class="col-md-3 py-5">
                                        <button type="button" class="btn bg-light border rounded-circle" ><i class="fas fa fa-minus" ></i></button>
                                        <input type="text" id="<?php echo $pro_id?>" value="<?php echo $pro_quantity?>" class="form-controls w-25 d-inline">
                                        <button type="button" class="btn bg-light border rounded-circle" > <i class="fas fa fa-plus" ></i></button>
                                    </div>
                                </div>
                            </div>
                        </form>


                    <?php }}?>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Also in my javascript, //--------success: function (data) ------- there has some problems

remove_post.php

conn.php is connect the database aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

<?php
include ("conn.php");
global $conn;
if(isset($_POST['p_id'])){

    if ($stmt = mysqli_prepare($conn, "delete from cart where p_id=?")) {

        /* bind parameters for markers */
        mysqli_stmt_bind_param($stmt, "i", $_POST['p_id']);

        mysqli_stmt_execute($stmt);

    }
}

cart databse:

Wouldn't it make more sense to get the value held in the field from the `value` attribute rather than the `id` attribute? — RiggsFolly, Mar 03 '20 at 10:38
Well, your AJAX code, sends `p_id` and your PHP script tries to fetch `P_id` (notice the uppercase P). Try checking your Network Console for your input and responses. — Repox, Mar 03 '20 at 10:40
Does this answer your question? [jQuery Ajax POST example with PHP](https://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php) — ThienSuBS, Mar 03 '20 at 10:54
yeah, I tried your suggestion, but it doesn't work @RiggsFolly — Tokyo, Mar 03 '20 at 11:57

Robin Gillitzer · Answer 1 · 2020-03-03T10:48:09.080

Your jQuery click listener listen on an ID that does not exist. So i have edited your button, and add it the right id. Then your let id get the ID of he button but it have to get the value. Try this out:

<form  method="post" class="cart-items">
    <div class="border rounded">
        <div class="row bg-white">
            <div class="col-md-3 pl-0">
                <img src="product_images/<?php echo $product_img1; ?>" alt="Image1" class="img-fluid">
            </div>

            <div class="col-md-6">
                <h5 class="pt-2"><?php echo $product_title; ?></h5>
                <small class="text-secondary">Seller: dailytuition</small>
                <h5 class="pt-2"><?php echo $only_price; ?></h5>
                <button type="submit" class="btn btn-warning">Save for Later</button>
                <button id="remove" type="submit" class="btn btn-danger mx-2" name="remove" value="<?php echo $pro_id;?>">Remove</button>
            </div>

            <div class="col-md-3 py-5">
                <button type="button" class="btn bg-light border rounded-circle" ><i class="fas fa fa-minus" ></i></button>
                <input type="text" id="<?php echo $pro_id?>" value="<?php echo $pro_quantity?>" class="form-controls w-25 d-inline">
                <button type="button" class="btn bg-light border rounded-circle" > <i class="fas fa fa-plus" ></i></button>
            </div>
        </div>
    </div>
</form>

The JavaScript:

<script>
    $(document).on('click','#remove',function () {
        let id= $(this).attr('value');
        HTMLDialogElement.confirm("<h3> Are you sure you want to remove data ?</h3>",{
            ok:function () {
                $.ajax({
                    url:"remove_post.php",
                    type:"POST",
                    data:{
                        p_id:id
                    },
                    success:function (data) {         // Ithink this is an error point
        HTMLDialogElement.alert("<h3> deleted</h3>");
                    }
                })
            },
            cancel:function () {
               this.close();
            }
        });
    })
</script>

And then in your PHP you have a typo. p_id instead of P_id:

include ("conn.php");
global $conn;
if(isset($_POST['p_id'])){

    if ($stmt = mysqli_prepare($conn, "delete from cart where p_id=?")) {

        /* bind parameters for markers */
        mysqli_stmt_bind_param($stmt, "i", $_POST['p_id']);

        mysqli_stmt_execute($stmt);

    }
}

I tried your suggestion , but still nope – Tokyo Mar 03 '20 at 11:56 — Tokyo, Mar 03 '20 at 11:56

How to delete data to MySql from PHP using jQuery AJAX

1 Answers1