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

Posted

技术标签:

【中文标题】单击属于表单的另一个按钮时如何禁用提交表单【英文标题】:How to disable submit the form when click a another button that belongs to the form 【发布时间】:2021-11-27 22:03:47 【问题描述】:

我编写了一个购物车页面并使用两个按钮来减少和增加数量,并使用 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 文件后,增加和减少按钮不起作用。但它以前工作过。所以我想知道如何解决这个自动提交?

【问题讨论】:

【参考方案1】:

您只需将 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>

【讨论】:

非常感谢您的帮助? 您可以将我的答案标记为正确@BlackAlpha【参考方案2】:

解决了:) 我在按钮上添加了type="button"

【讨论】:

以上是关于单击属于表单的另一个按钮时如何禁用提交表单的主要内容,如果未能解决你的问题,请参考以下文章

使用 Jquery 在第一次单击时禁用提交按钮

防止使用 angular.js 提交多个表单 - 禁用表单按钮

多次点击提交后如何只提交一次表单?

在 Bootstrap 模式窗口中单击 Enter 并点击提交按钮时提交表单数据

单击按钮时如何防止表单提交? [复制]

Angular 2 提交时触发表单验证