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:
JavaScript
x
45
45
1
<?php
2
$count=0;
3
$grandTotal=0;
4
foreach($_SESSION['cart'] AS $product) {
5
$table=$product['table'];
6
$id=$product['id'];
7
$Name=$product['name'];
8
$qty=$product['quantity'];
9
$price=$product['price'];
10
$total=$qty*$price;
11
$grandTotal +=$total;
12
?>
13
14
<tr>
15
<td class="cart_product">
16
<img src=<?php $i=2; echo "images/".$table."/".$id.".jpg"?> height="150" width="150">
17
</td>
18
<td class="cart_description">
19
<h4><a href=""><?php echo $Name?></a></h4>
20
<p><?php echo "Web ID: ".$id?></p>
21
</td>
22
<td class="cart_price">
23
<p><?php echo $price?></p>
24
</td>
25
<td class="cart_quantity">
26
<div class="cart_quantity_button">
27
<a class="cart_quantity_up" href="addToCart.php?table=<?php echo $table ?>&action=inc&id=<?php echo $id ?>" id="increment"> + </a>
28
<input class="cart_quantity_input" type="text" name="quantity" id="qty" value="<?php echo $qty?>" autocomplete="off" size="2">
29
<!-- <p class="cart_quantity_input" name="qunatity" id="qty"><?php echo $qty?></p>-->
30
<a class="cart_quantity_down" href="addToCart.php?table=men&action=dec&id=<?php echo $id ?>" name="decrement" > - </a>
31
</div>
32
</td>
33
<td class="cart_total">
34
<p class="cart_total_price"><?php echo $total ?></p>
35
</td>
36
<td class="cart_delete">
37
<a class="cart_quantity_delete" href="addToCart.php?table=men&action=del&id=<?php echo $id ?>"><i class="fa fa-times"></i></a>
38
</td>
39
</tr>
40
41
<?php
42
}
43
$tax=0.15*$grandTotal;
44
?>
45
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:
JavaScript
1
10
10
1
<script>
2
$(document).ready(function () {
3
$("#increment").click(function () {
4
var oldval=document.getElementById("qty").value;
5
var newval=parseInt(oldval);
6
document.getElementById("qty").value=newval++;
7
});
8
});
9
</script>
10
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
JavaScript
1
17
17
1
$(document).ready(function () {
2
$(".increment").click(function () {
3
var oldval = $(this).prev('.qty').val();
4
5
var newval = parseInt(oldval)+ 1;
6
7
$(this).prev('.qty').val(newval);
8
});
9
$(".decrement").click(function () {
10
var oldval = $(this).next('.qty').val();
11
12
var newval = parseInt(oldval) - 1;
13
14
$(this).next('.qty').val(newval);
15
});
16
17
});
JavaScript
1
46
46
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2
<table> <tr>
3
<td>sl No</td>
4
<td>name</td>
5
<td>Dept</td>
6
<td>dummy</td>
7
<td>dummy</td>
8
<td>dummy</td>
9
</tr>
10
11
<tr>
12
<td>1</td>
13
<td>name</td>
14
<td>
15
16
17
</td>
18
<td>name</td>
19
<td>name</td>
20
<td> </td>
21
</tr>
22
23
24
<tr>
25
<td>2</td>
26
<td>name</td>
27
<td>Dept</td>
28
<td>name</td>
29
<td> <button class="decrement"> - </button>
30
<input type="text" class="qty" value="1"/>
31
<button class="increment">+ </button>
32
</td>
33
<td>name</td>
34
</tr>
35
36
<tr>
37
<td>3</td>
38
<td>name</td>
39
<td>name</td>
40
<td>name</td>
41
<td>name</td>
42
<td>name</td>
43
</tr>
44
45
46
</table>