I am using session variable to keep track of items in the cart. I generate a table using loop to display contents of the cart. The code for table is as follow:
<?php $count=0; $grandTotal=0; foreach($_SESSION['cart'] AS $product) { $table=$product['table']; $id=$product['id']; $Name=$product['name']; $qty=$product['quantity']; $price=$product['price']; $total=$qty*$price; $grandTotal +=$total; ?> <tr> <td class="cart_product"> <img src=<?php $i=2; echo "images/".$table."/".$id.".jpg"?> height="150" width="150"> </td> <td class="cart_description"> <h4><a href=""><?php echo $Name?></a></h4> <p><?php echo "Web ID: ".$id?></p> </td> <td class="cart_price"> <p><?php echo $price?></p> </td> <td class="cart_quantity"> <div class="cart_quantity_button"> <a class="cart_quantity_up" href="addToCart.php?table=<?php echo $table ?>&action=inc&id=<?php echo $id ?>" id="increment"> + </a> <input class="cart_quantity_input" type="text" name="quantity" id="qty" value="<?php echo $qty?>" autocomplete="off" size="2"> <!-- <p class="cart_quantity_input" name="qunatity" id="qty"><?php echo $qty?></p>--> <a class="cart_quantity_down" href="addToCart.php?table=men&action=dec&id=<?php echo $id ?>" name="decrement" > - </a> </div> </td> <td class="cart_total"> <p class="cart_total_price"><?php echo $total ?></p> </td> <td class="cart_delete"> <a class="cart_quantity_delete" href="addToCart.php?table=men&action=del&id=<?php echo $id ?>"><i class="fa fa-times"></i></a> </td> </tr> <?php } $tax=0.15*$grandTotal; ?>
I am having problem with +
and -
buttons within a
tags. I want to increment or decrement value in input field named quantity
. But since i am generating table in a loop i do not know the id of each field. I want to do something like this:
<script> $(document).ready(function () { $("#increment").click(function () { var oldval=document.getElementById("qty").value; var newval=parseInt(oldval); document.getElementById("qty").value=newval++; }); }); </script>
But this method always increments first quantity field in the table. How do i get ids of other quantity fields in the table?
Advertisement
Answer
Dont use ids inside loop.Just use class for that>check the snippet for a smaple demo
$(document).ready(function () { $(".increment").click(function () { var oldval = $(this).prev('.qty').val(); var newval = parseInt(oldval)+ 1; $(this).prev('.qty').val(newval); }); $(".decrement").click(function () { var oldval = $(this).next('.qty').val(); var newval = parseInt(oldval) - 1; $(this).next('.qty').val(newval); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>sl No</td> <td>name</td> <td>Dept</td> <td>dummy</td> <td>dummy</td> <td>dummy</td> </tr> <tr> <td>1</td> <td>name</td> <td> </td> <td>name</td> <td>name</td> <td> </td> </tr> <tr> <td>2</td> <td>name</td> <td>Dept</td> <td>name</td> <td> <button class="decrement"> - </button> <input type="text" class="qty" value="1"/> <button class="increment">+ </button> </td> <td>name</td> </tr> <tr> <td>3</td> <td>name</td> <td>name</td> <td>name</td> <td>name</td> <td>name</td> </tr> </table>