Question

我在提交表单上有两个按钮。

1。添加到购物车按钮

2。立即购买按钮

如果单击按钮，我需要添加禁用类，

submitForm: function (form) {
        var addToCartButton, buyNowButton, self = this;

        if (form.has('input[type="file"]').length && form.find('input[type="file"]').val() !== '') {
            self.element.off('submit');
            // disable 'Add to Cart' button

            addToCartButton = $(form).find(this.options.addToCartButtonSelector);
            buyNowButton = $(form).find(this.options.buyNowButtonSelector);

            if(addToCartButton){
                addToCartButton.prop('disabled', true);
                addToCartButton.addClass(this.options.addToCartButtonDisabledClass);
            }else if(buyNowButton){
                buyNowButton.prop('disabled', true);
                buyNowButton.addClass(this.options.buyNowButtonDisabledClass);
            }


            form.submit();
        } else {
            self.ajaxSubmit(form);
        }
    },

Answer 1

像这样尝试（JQuery）：

          $(".classNameOfButton").click(function(){functionName(this)});

Answer 2

纯Javascript，您可以：）

document.addEventListener('DOMContentLoaded', () => {
  const button = document.querySelector("button");

  button.addEventListener("click", (e) => {
    e.target.disabled = true
  }) 
});

等待DOM内容加载（在您的情况下可能不必要，因为它将成为较大代码库的一部分
获取所需的按钮元素

click

addEventListener添加到该元素
已将其禁用为true

关于event.target

https://developer.mozilla.org/pl/docs/Web/API/Event/target

Codepen：

https://codepen.io/pen/

Answer 3

JS：

// Disable default Event (Browser reloading..)
const formElement = document.getElementByID("formID");
formElement.addEventListener("submit", () => {

event.preventDefault（）; }）;

const button1 = document.getElementByID("button1");
button1.addEventListener("click", (event) => {
 // do something...
     e.target.classList.add("disabled");
});


const button2 = document.getElementByID("button2");
button2.addEventListener("click", (event) => {
 // do something...
     e.target.classList.add("disabled");
});

防止表单提交按钮的默认操作（重新加载站点）
同时获得两个按钮并附加一个“ click”事件监听器
如果单击添加“禁用”类

单击如何检测提交表单按钮

3 个答案: