How to detect submit form button was clicked

Question

I've two button on submit form.

1. Add to Cart Button

2. Buy Now Button

I need to add disable class if the button was clicked,

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

Possible duplicate of [How can I get the button that caused the submit from the form submit event?](https://stackoverflow.com/questions/2066162/how-can-i-get-the-button-that-caused-the-submit-from-the-form-submit-event) -> You can use `document.activeElement` inside the vent handler to find out, which button was used to trigger the form submit (or if any of those buttons was used at all, because a form submit may also be triggered by pressing enter inside a text-field) — feeela, Sep 19 '18 at 09:00

score 1 · Answer 1 · answered Sep 19 '18 at 08:52

1

Try it like this (JQuery):

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

answered Sep 19 '18 at 08:52

Please describe in more detail why this might be solution. – feeela Sep 19 '18 at 09:02

score 0 · Answer 2 · answered Sep 19 '18 at 09:03

Pure Javascript, here you go :)

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

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

wait for DOM content to get loaded (probably not necessary in your case as it will be part of larger codebase
get button element you need
addEventListener for click to that element
set disabled to true

About event.target

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

Codepen:

https://codepen.io/pen/

filip · Answer 3 · 2018-09-19T11:12:58.790

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

Prevent Default Action of a form submit button (reload site)
get both buttons and attach an "click" event listener
If clicked add "disabled" class

How to detect submit form button was clicked

3 Answers3