function cartElement($productimg, $productname,  $productdesc,$productprice, $productid){
    $element = "
    
    <form action=\"cart.php?action=remove&id=$productid\" method=\"post\" class=\"cart-items\">
        <div class=\"border rounded\">
            <div class=\"row\">
                <div class=\"col-md-3 pl-0\">
                    <img src=$productimg alt=\"Image1\" class=\"img-fluid\">
                </div>
                <div class=\"col-md-6\">
                    <h5 class=\"pt-2\">$productname</h5>
                    <small class=\"text-secondary\">Seller: Phybrid</small>
                    <h5 id=\"price\" name= \"$productname\" value= \"$productprice\" class=\"pt-2\">$$productprice</h5>
                    <button type=\"submit\" class=\"btn btn-warning\">Save for Later</button>
                    <button type=\"submit\" class=\"btn btn-danger mx-2\" name=\"remove\">Remove</button>
                </div>
                <div class=\"col-md-3 py-5\">
                    <div class=\"qty\">
                        <button id=\"up\" type=\"button\" onclick=\"incrementValue()\" class=\"qty_up btn border rounded-circle\" value=\" \" ><i class=\"fas fa-minus\"></i></button>
                        <input id=\"quantity\" name=\"$productname\" type=\"text\"  value=\"1\" placeholder=\"1\" class=\"qty_input form-control w-25 d-inline\" style= \"width: 35%!important;\">
                        <button id=\"down\" type=\"button\" onclick=\"decrementValue()\" class=\"qty_down btn border rounded-circle\" value=\"-\" ><i class=\"fas fa-plus\"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </form>"; 
    echo  $element;
}    

^ is the code for the cart element

<h6 >$<?php echo $total; ?></h6>
<?php
    $total = 0;
    if (isset($_SESSION['cart'])){
        $product_id = array_column($_SESSION['cart'], 'product_id');
        $result = $db->getData();
        while ($row = mysqli_fetch_assoc($result)){
            foreach ($product_id as $id){
                if ($row['id'] == $id){
                    cartElement($row['product_image'], $row['product_name'],$row['product_desc'],$row['product_price'], $row['id']);
                    $total = $total   (int)$row['product_price'];
                }
            }
        }
    }else{
        echo "<h5>Cart is Empty</h5>";
    }
?>

^ is the code of my total price

I have no idea how to start on this like ive tried so many youtube videos and tried so many codes but nothing worked.

CodePudding user response：

Changed your HTMLInputElement type to 'number' and added a min of 1 (supposing that you dont want it to be less than 1).With javascript:

const buttonUp = document.querySelector('#up')
const buttonDown = document.querySelector('#down')

const targetInput = document.querySelector('#quantity')

buttonUp.onclick = () => {
  const total = parseInt(targetInput.value)   1
  targetInput.value = total
}
buttonDown.onclick = () => {
  if (parseInt(targetInput.value) > 1) {
    const total = parseInt(targetInput.value) - 1
    targetInput.value = total
  }
    
}

<div >
<button id="up" type="button"  value=" " ><i > </i></button>
<input id="quantity" name="$productname" type="number"  value="1" placeholder="1"  style= "width: 35%!important;">
<button id="down" type="button"  value="-" ><i >-</i></button>
</div>

CodePudding user response：

As IncredibleHat said, you then have to use classes instead of ids, since they have to be unique in your html. Then you could try:

const buttonsUp = document.querySelectorAll('.qty_up')
const buttonsDown = document.querySelectorAll('.qty_down')
    

/* For each of the buttons,
accessing to its nextElementsibling or prevousElementSibling
that's the input field */

    buttonsUp.forEach(btnUp => {
      btnUp.onclick = () => {
        const targetInput = btnUp.nextElementSibling
        const total = parseInt(targetInput.value)   1
        targetInput.value = total
      }
    })
    buttonsDown.forEach(btnDown => {
      btnDown.onclick = () => {
        const targetInput = btnDown.previousElementSibling
        if (parseInt(targetInput.value) > 1) {
          const total = parseInt(targetInput.value) - 1
          targetInput.value = total
        }
      }
    })

<div >
    <button type="button"  value=" " ><i > </i></button>
    <input id="quantity" name="$productname" type="number"  value="1" placeholder="1"  style= "width: 35%!important;">
    <button type="button"  value="-" ><i >-</i></button>
  </div>
  <div >
    <button type="button"  value=" " ><i > </i></button>
    <input id="quantity2" name="$productname" type="number"  value="1" placeholder="1"  style= "width: 35%!important;">
    <button type="button"  value="-" ><i >-</i></button>
  </div>
  <div >
    <button type="button"  value=" " ><i > </i></button>
    <input id="quantity3" name="$productname" type="number"  value="1" placeholder="1"  style= "width: 35%!important;">
    <button type="button"  value="-" ><i >-</i></button>
  </div>