How send data to php with ajax on button click - 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.