單擊如何檢測提交表單按鈕

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
  }) 
});

1. 等待DOM內容加載（在您的情況下可能不必要，因為它將成為較大代碼庫的一部分
2. 獲取您需要的按鈕元素
3. click該元素的addEventListener
4. 將禁用設置為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");
});

1. 阻止表單提交按鈕的默認操作（重新加載站點）
2. 同時獲得兩個按鈕並附加一個“ click”事件監聽器
3. 如果單擊，則添加“禁用”類