如何在单击属于表单的另一个按钮时禁用提交表单

Question

我编写了一个购物车页面，使用两个按钮来减少和增加数量，并使用JavaScript使其正常工作。

这里有一半的HTML代码，

<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>

JavaScript代码在这里，

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显示在只读输入标签上，因为这样我就可以使用PHP获得值并在另一个页面上显示它们。因此，在该页面上，我实现了显示该数量值的代码。

PHP代码在这里(来自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>

因此，在我将这段PHP代码添加到payment.php文件后，增加和减少按钮不起作用。但它以前是有效的。我如何修复这个自动提交?

Answer 1

您只需要将onsubmit HTML属性添加到表单的HTML中并调用事件。preventDefault函数。这样的:

<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>

Answer 2

问题解决了:)

我将type="button"添加到按钮中。