单击属于表单的另一个按钮时如何禁用提交表单
How to disable submit the form when click a another button that belongs to the form
我编写了一个购物车页面并使用了两个按钮来减少和增加数量,我使用 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();
}
数量显示在只读输入标签上,因为这样我就可以使用 PHP 获取值并将它们显示在另一页上。所以在该页面上,我实现了显示该数量值的代码。
PHP 代码在这里(来自payment.php),
<div class="details">
<p class="pname">Product Name</p>
<p class="pvar">Variation</p>
<p class="pqty">.00 ⨯ <?php echo $_POST["qty1"] ?></p>
</div>
因此,在我将此 PHP 代码添加到 payment.php 文件后,增加和减少按钮不起作用。但它以前有效。所以我想知道如何解决这个自动提交问题?
解决了:)
我在按钮上添加了 type="button"
。
您只需将 onsubmit HTML 属性添加到表单的 HTML 并调用 event.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>
我编写了一个购物车页面并使用了两个按钮来减少和增加数量,我使用 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();
}
数量显示在只读输入标签上,因为这样我就可以使用 PHP 获取值并将它们显示在另一页上。所以在该页面上,我实现了显示该数量值的代码。
PHP 代码在这里(来自payment.php),
<div class="details">
<p class="pname">Product Name</p>
<p class="pvar">Variation</p>
<p class="pqty">.00 ⨯ <?php echo $_POST["qty1"] ?></p>
</div>
因此,在我将此 PHP 代码添加到 payment.php 文件后,增加和减少按钮不起作用。但它以前有效。所以我想知道如何解决这个自动提交问题?
解决了:)
我在按钮上添加了 type="button"
。
您只需将 onsubmit HTML 属性添加到表单的 HTML 并调用 event.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>