CODEWITHSUNDEEP
javascripthtmljqueryformsdom-events
joshdcomp
joshdcomp

Reputation: 1678

Determine which element triggered a form submit event

I'll preface by saying that I'm very familiar with click events and know I can register a click event on a form submit button as many other answers explain. My question is a level deeper.

Forms can be submitted in other ways than clicking submit: I'm thinking like when a user presses enter while focused on an input/select or even by pressing space or enter while focused on the submit button itself…and I'd like to be able to get a reference to the element that submitted the form.

This answer seemed to have promise, but I'm not exactly sure how to 'see' the values he mentions. I made a codepen to demonstrate. *edit: I updated the codepen to reflect the accepted answer below.

It would also seem that the answer is actually inaccurate in that when a user submits a form, the browser triggers the click event on the first submit in the form, not the first submit after the element that triggered the submit (at least when I ran that Codepen in Chrome/Firefox/Safari).

To give some context for why this is necessary, I'm working on an Asp.NET site where every page's content is encapsulated in a monolithic form. I'm adding an email subscription form to the footer that submits asynchronously…which means I need to do an e.preventDefault() on the event and also want to avoid accidental submissions if the form is actually being submitted from somewhere else like the search bar up top or a form I wasn't aware of.

Upvotes: 11

Views: 5739

Answers (3)

Abraham
Abraham

Reputation: 15670

Use submitter

event.nativeEvent.submitter would give you the button that initiated submit

submit(event){

    if (event.nativeEvent.submitter.id == "button2") { //do whatever }

}

Upvotes: 0

Foumpie
Foumpie

Reputation: 1555

The submit event of a <form> element actually contains a reference to the submitter:
https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter

form.onsubmit = (event) => {
    const formElement = event.target;
    const formSubmitter = event.submitter;
    console.log("The form element itself", formElement);
    console.log("The submitter of the form (usually an HtmlInputElement)", formSubmitter);

    const formData = new FormData(formElement);
    if(formSubmitter) formData.set(formSubmitter.name, formSubmitter.value);

    fetch(formElement.action, {
        method: formElement.method,
        body: formData,
    })

    event.preventDefault();
}

Note: check the compatibility of this feature.

Upvotes: 6

unpollo
unpollo

Reputation: 804

You can use document.activeElement This will work for clicks and when the user tabs to a button and hits the enter button.

Listen for the submit event on the form, then inside of the callback, reference document.activeElement, it will be the button that the user clicked or tabbed to.

Example: http://codepen.io/anon/pen/KVoJrJ

Upvotes: 15

Related Questions