How to fix the increase and decrease value of my shopping card? (PHP & Javascript)

When I add a product in my shopping card and I decrease or increase the value, everything works. But when I want to add another product in my shopping card and I want to decrease or increase the value of that product, it change the value of the first one. I don't know where the problem is.

// Shopping Card page

$shoppingCardItem = ShoppingCardDAO::getShoppingCardItems();

foreach ($shoppingCardItem as $item) {

<tr>
    <td><a href="detail.php?productId=<?php echo $item->getProductId(); ?>"><img class="card-img-top" src="./img/<?php echo $item->getProduct()->getImage(); ?>"></a></td>
    <td><?php echo $item->getProduct()->getName(); ?></td>
    <td class="card-text">&euro; <?php echo $item->getTotalExclVAT(); ?><small> (Excl. VAT)</small></td>
    <td class="card-text">&euro; <?php echo $item->getTotalInclVAT(); ?><small> (Incl. VAT)</small></td>

    <td>
       <form action="" method="POST" enctype="multipart/form-data">
        <input type="hidden" name="postcheck" value="true">
        <input type="hidden" name="productId" value="<?php echo $item->getProductId() ?>">
        <input type="button" class="value-button" id="decrease" onclick="decreaseValue()" name="decrease" value="-">
        <input type="text" id="number" name="quantity" value="<?php echo $item->getQuantity(); ?>" />
        <input type="button" class="value-button" id="increase" onclick="increaseValue()" name="increase" value="+">
        <td><input type="submit" name="deleteShoppingCardItem" value="Delete" class="col-0.5 btn btn-danger"></td>                               
       </form>
    </td>
</tr>
}

<script type = "text/javascript" src = "js/script.js" ></script>

// javascript

function increaseValue() {
  var value = parseInt(document.getElementById('number').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number').value = value;
}

function decreaseValue() {
  var value = parseInt(document.getElementById('number').value, 10);
  value = isNaN(value) ? 0 : value;
  value < 1 ? value = 1 : '';
  value--;
  document.getElementById('number').value = value;
}

// image with explanations
https://i.stack.imgur.com/hE1k2.png

Tray2

7 years ago

Level 73

You need to put in a identifier that you can pass to your javascript. I would give each item row it's unique id something like

<input type="button" class="value-button" id="decrease-{{ $item->id }}" onclick="decreaseValue({{$item->id}})">

That way you know which of the items you should increase

function decrease(item)
el = document.querySelector('#decrease-' + item);
el.value = parseInt(el.value)--;

Snapey

7 years ago

Level 122

Your javascript uses ID to target the element to be updated. You should not repeat an ID on an html page so you should realise this is wrong when you put it in a foreach loop

each iteration of the loop you need to vary the field names.

@TRAY2 is correct, but you also need to change the name and ID of the quantity field

<input type="text" id="number-{{ $item-id }}" name="quantity" value="<?php echo $item->getQuantity(); ?>" />

and then increase or decrease the correctly numbered item

Please or to participate in this conversation.