如何在单击按钮时使用Ajax将数据发送到php

Question

i have products on my website and i made ajax call to insert product to shopping cart, but there is problem with clicking button. when i click on first product in list everything works but other product buttons do not react

    <?php foreach ($products as $product):?>
       <?php if($product['kateg'] == "men"):?>       

<h5 style="color: #0669b4; min-height: 70px;"><?php echo $product['dasax']?></h5>
                                <p style="text-align: left; text-decoration: overline">Old price: <strong><span style="text-decoration: line-through"><?php echo round($product['fasi1'], 2)?> GEL</span></strong><br></p>
                                <p style="text-align: left">New Price: <strong><?php echo round($product['fasi2'], 2)?> GEL</strong><br></p>



        <input type="hidden" value="<?php echo $product['id']?>" id="product_id">
        <input type="hidden" value="<?php echo $product['dasax']?>" id="product_name">
        <input type="hidden" value="<?php echo $product['fasi2']?>" id="product_price">
        </a>
        <button class="btn btn-primary" type="submit" id="add_to_cart">Add</button>
        <?php endif;?>
    <?php endforeach;?>

<script>
    $(document).ready(function () {

        $('#add_to_cart').click(function () {
            var product_id = $("#product_id").val();
            var product_name = $("#product_name").val();
            var product_price = $("#product_price").val();

                $.ajax({
                    url: "/uketesi/index",
                    method: "POST",
                    dataType: "json",
                    data: {
                        product_id:product_id,
                        product_name:product_name,
                        product_price:product_price,
                    },
                    success:function (data) {
                      alert("produqti warmatebit daemata")
                $("#კალათა").html("<table id=\"example2\" class=\"table table-bordered table-hover\">" +
                    "<thead>" +
                    "<tr>" +
                    "<th>დასახელება</th>" +
                    "<th>ფასი</th>" +
                    "<th>იდენტიფიკატორი</th>" +
                    "</tr>" +
                    "<tr>" +
                    "<td>" + product_name + "</td>" +
                    "<td>" + product_price + "</td>" +
                    "<td>" + product_id + "</td>" +
                    "</tr>" +
                    "</thead>" +
                    "</table>");
                    }
                });
        });
    });

</script>

I figured out how to solve the problem above, i have another question how can i add multiple products with this code. for now i only can add one product when i click on another product the old one dissepears.

Answer 1

You can get the data from data-*="" attribute on the button. So no need hidden inputs. For the click event you should use class name. Other case ID wont be unique. Please try following code.

    <?php foreach ($products as $product):?>
       <?php if($product['kateg'] == "men"):?>       

<h5 style="color: #0669b4; min-height: 70px;"><?php echo $product['dasax']?></h5>
                                <p style="text-align: left; text-decoration: overline">Old price: <strong><span style="text-decoration: line-through"><?php echo round($product['fasi1'], 2)?> GEL</span></strong><br></p>
                                <p style="text-align: left">New Price: <strong><?php echo round($product['fasi2'], 2)?> GEL</strong><br></p>

        </a>
        <button class="btn btn-primary" type="submit" class="add_to_cart" data-id="<?php echo $product['id']?>" data-name="<?php echo $product['dasax']?>" data-price="<?php echo $product['fasi2']?>">Add</button>
        <?php endif;?>
    <?php endforeach;?>

<script>
    $(document).ready(function () {

        $('.add_to_cart').click(function () {


            var product_id = $(this).data('id');
            var product_name = $(this).data('name');
            var product_price = $(this).data('price');

                $.ajax({
                    url: "/uketesi/index",
                    method: "POST",
                    dataType: "json",
                    data: {
                        product_id:product_id,
                        product_name:product_name,
                        product_price:product_price,
                    },
                    success:function (data) {

                    }
                });
        });
    });

</script>

Answer 2

Now that we have the form, and jQuery included in our document, we need to store it's values in 2 variables, ( val1 and val2 ) so then we can pass it to the PHP file to process it.

$('#button').click(function() {
    var val1 = $('#text1').val();
    var val2 = $('#text2').val();
    $.ajax({
        type: 'POST',
        url: 'process.php',
        data: { text1: val1, text2: val2 },
        success: function(response) {
            $('#result').html(response);
        }
    });
});

As you can see in the code above, we create a .click event. This means that when the button with the ID of #button is click, out function will run. Then we get the value of each text field and store it in val1 and val2.