Estoy tratando de desarrollar una función de agregar al carrito a través de ajax, el problema es que no importa qué producto agregue al carrito, agrega el último artículo en la lista y luego incrementa el mismo producto al hacer clic en cualquier otro producto. Aquí está mi código: -
<?php $i = 1; while($row = mysqli_fetch_array($run_products)){ $op_id = $row['option_id']; echo "<tr>"; echo "<td>" . $i . "</td>"; echo "<td>" . $row['option_desc'] . "</td>"; echo "<td> <form action='' method='post' class='p_form'> <input type='text' name='product_id' value='$op_id' pid='$op_id'> <input type='text' name='quantity' value='1' pid='$op_id'> <input class='btn btn-primary add' type='submit' name='add_to_cart' value='Add to Cart' id='product' pid='$op_id'> </form> </td>"; echo "</tr>"; $i++; } ?>Aquí está jquery:
<script type="text/javascript"> $(document).ready(function(){ $(document).on('click','.p_form',function (event) { event.preventDefault(); var element = $(this); var id = element.attr("pid"); //alert(id); $.ajax({ url: 'action.php', method: 'post', //data: {id:id}, data:$('.p_form').serialize(), success: function(data){ $('#message').html(data); } }); return false; }); }); </script> Aquí está action.php , $product_id siempre regresa como 4 (por ejemplo) si la última identificación en la última es 4
if (!empty($_POST)){ $product_id = $_POST['product_id']; echo $product_id; }Necesito hacerlo como a continuación: -
<script type="text/javascript"> $(document).ready(function(){ $(document).on('click','.add',function (event) {//instead of form click add event on form button click event.preventDefault(); var element = $(this); var id = element.attr("pid"); //alert(id); $.ajax({ url: 'action.php', method: 'post', data:element.parent('.p_form').serialize(), //serialize clicked button parent form success: function(data){ $('#message').html(data); } }); return false; }); }); </script>Desencadenar el evento de clic en el botón, no en el clic del formulario:
Esto funcionará para usted para cada producto.
<script type="text/javascript"> $(document).ready(function(){ $(document).on('click','.add',function (event) { event.preventDefault(); var element = $(this); var id = element.attr("pid"); //alert(id); $.ajax({ url: 'action.php', method: 'post', data: {id:id}, //send id of product you wish to add success: function(data){ $('#message').html(data); } }); return false; }); }); </script>Y del lado del servidor:
if (!empty($_POST)){ $product_id = $_POST['id'];//get only that id posted in ajax call echo $product_id; }