How send data to php with ajax on button click

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.

i guess you have multiple same ids in your document. thats why id does not work. use classes to name the data-fields. — Bernhard
– Bernhard, Commented May 21, 2018 at 7:21
Not only that you need to put them inside one HTML element to distinguish from other. — Death-is-the-real-truth
– Death-is-the-real-truth, Commented May 21, 2018 at 7:26

B.Kocaman · Accepted Answer · 2018-05-21 07:26:30Z

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>

answered May 21, 2018 at 7:26

B.Kocaman

8255 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Iva Kobalava Over a year ago

i tried but it is not working. the first product stopped working too, can i have two class atribute on one tag?

Iva Kobalava Over a year ago

@AlivetoDie Thank you i checked

Iva Kobalava Over a year ago

another issue is that when i click button data is submitted but $_POST is empty

Iva Kobalava Over a year ago

tried but not working. the problem is that i have my cart on same page in other tab and i need to update it without refresh. when i click button Status Code: 200 OK and form data is filled correctly but $_POST['product_id'] is empty

B.Kocaman Over a year ago

So when you try console.log(product_id); it display data? If you would like to use ajax better to post the data to another page for progress. Then do the javascript staff in ajax response on success.

Mayank Pandeyz · Accepted Answer · 2018-05-21 07:38:55Z

1

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.

edited May 21, 2018 at 7:38

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

answered May 21, 2018 at 7:26

anushri

112 bronze badges

Collectives™ on Stack Overflow

How send data to php with ajax on button click

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related