点击表单内数量加减按钮触发自动提交该如何禁用？

问题原因 #

<button>标签在<form>表单内使用时，默认type属性值为submit，因此点击加减按钮时会触发默认的表单提交行为，和你新增的PHP代码无关。

修复方案 #

方案1：给加减按钮指定type属性（推荐，改动最小） #

直接修改HTML代码，给两个数量控制按钮明确添加type="button"，声明其为普通交互按钮，不会触发表单提交：

<form action="payment.php" method="post">
    <div class="qty__amount">
        <!-- 新增type="button"属性 -->
        <button type="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>
        <!-- 新增type="button"属性 -->
        <button type="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>

方案2：JS事件中阻止默认提交行为 #

如果不想改动HTML代码，可以在绑定的点击事件中添加阻止默认行为的逻辑：

document.getElementById("minus1").onclick = function(e) {
    // 阻止默认的表单提交动作
    e.preventDefault();
    minusButton("qtyamount1", "itemPrice1", "eachItemTotal1");
};
document.getElementById("plus1").onclick = function(e) {
    // 阻止默认的表单提交动作
    e.preventDefault();
    plusButton("qtyamount1", "itemPrice1", "eachItemTotal1");
};

两种方案任选其一即可，修改完成后加减按钮的交互逻辑会恢复正常，也不会影响最终点击结账按钮时提交表单传递数量参数给payment.php的逻辑。

内容的提问来源于stack exchange，提问作者kaveendev