單擊屬于表單的另一個按鈕時如何禁用提交表單-有解無憂

我撰寫了一個購物車頁面并使用了兩個按鈕來減少和增加數量，并使用 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">$80.00 &Cross; <?php echo $_POST["qty1"] ?></p>
</div>

因此，在我將此 PHP 代碼添加到 payment.php 檔案后，增加和減少按鈕不起作用。但它以前有效。所以我想知道如何修復這個自動提交？

uj5u.com熱心網友回復：

您只需要將 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>

uj5u.com熱心網友回復：

它解決了:) 我添加type="button"到按鈕。

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/311237.html

標籤：javascript php html 形式文本输入

上一篇：如何讓$_GET使用你想要的值？

下一篇：使用版本7中的reacthook形式上傳檔案？