How to disable submitting the form when clicking on another button that belongs to the form

Question

I coded a cart page and used two buttons to decrease and increase the quantity and I make it work correctly using JavaScript.

Half of the HTML code is here,

<form action="payment.php" method="post">
    <div class="qty__amount">
        <button class="qty__button" id="minus1"><i class="uil uil-minus-square-full"></i></button>
        <input autocomplete="off" class="qtyamount1 ro_form-qty" type="text" id="qtyamount1" name="qty1" value="0" readonly>
        <button class="qty__button" id="plus1"><i class="uil uil-plus-square"></i></button>
    </div>

    <div class="button">
        <button class="checkout__button" type="submit">Checkout</button>
    </div>
</form>

The JavaScript code is here,

document.getElementById("minus1").onclick = function() {minusButton("qtyamount1", "itemPrice1", "eachItemTotal1")};
document.getElementById("plus1").onclick = function() {plusButton("qtyamount1", "itemPrice1", "eachItemTotal1")};

function minusButton(quantityID, itemPriceId, eachItemTotalpriceID) {
    priceDecrease(itemPriceId, quantityID);
    quantityDecrease(quantityID);
    eachItemPriceDecrease(eachItemTotalpriceID, itemPriceId);
}

function plusButton(quantityID, itemPriceId, eachItemTotalpriceID) {
    priceIncrease(itemPriceId);
    quantityIncrease(quantityID);
    eachItemPriceIncrease(eachItemTotalpriceID, itemPriceId);
}

function quantityDecrease(item) { // quantityDecrease

    let quantity = 0;
    quantity = parseInt(document.getElementById(item).value) - 1;
    if(quantity < 0) {
    }
    else {
        document.getElementById(item).value = quantity.toString();
    }
}

function quantityIncrease(item) { // quantityIncrease

    let quantity = 0;
    quantity = parseInt(document.getElementById(item).value) + 1;
    console.log(quantity);
    document.getElementById(item).value = quantity.toString();
}

Quantity shows on a read-only input tag because then I can get values using PHP and show them on another page. So on that page, I implement the code to display that quantity value.

The PHP code is here (from payment.php),

<div class="details">
   <p class="pname">Product Name</p>
   <p class="pvar">Variation</p>
   <p class="pqty">$80.00 &Cross; <?php echo $_POST["qty1"] ?></p>
</div>

So after I added this PHP code to the payment.php file, the increase and decrease buttons are not working. But it worked before. How can I fix this automatic submission?

Answer 1

You just need to add the onsubmit HTML attribute to your form's HTML and call the event.preventDefault function. Like this:

<form onsubmit="event.preventDefault()" action="payment.php" method="post">
    <div class="qty__amount">
      <button class="qty__button" id="minus1" type="button"><i class="uil uil-minus-square-full"></i></button>
      <input autocomplete="off" class="qtyamount1 ro_form-qty" type="text" id="qtyamount1" name="qty1" value="0" readonly>
      <button class="qty__button" id="plus1" type="button"><i class="uil uil-plus-square"></i></button>
    </div>

    <div class="button">
      <button class="checkout__button" type="submit">Checkout</button>
    </div>
</form>