Extend submit events: add the button/element, that triggered the submit

HTML
1

This StackOverflow question asks to find the button, that triggered a submit form event from within an submit event handler. Use cases for this are a dime a dozen, when you think of serializing the form data for AJAX requests and more than one submit buttons in the <form>.

My answer was to use document.activeElement for this, but it has some shortcomings, like any of the other answers, too.

Therefore adding a property to the dispatched submit event that links to the initiator of the submission would help here. The property references the DOM element, that was activated for the form submission. Something along the following lines:

Property submitter on an event of type submit

When a form is submitted, the submit event created according to HTML5.1, Form submission algorithm contains a property submitter.

  1. If the form was submitted via click on a submit button, event.submitter references the button.
  2. If the form was submitted implicitly, e.g., by hitting enter in a text input field, event.submitter references the form’s default button as defined in Implicit submission
  3. If the form was submitted with its submit() method, set event.submitter = null.
3 Likes
2

Please!

The trick I use is to append a dummy input[type=hidden] to the form on button click. That way any handler using a generic $(form).serialize() will pick up those values. Obviously has its downsides.

event.relatedTarget might be an option too.

3

Yes, your solution like mine and almost all others out there specifically lack the correct behavior for implicit submission, especially pressing enter in a text input field. Other problems arise, when something happens between click and submit, like other event handlers.

Therefore my conclusion was, that the problem can reliably only solved by browsers, that happen to know this detail already. They just have to announce it somewhere.

4

Countless times I have needed this; it is a shame that buttons don’t get serialised with forms too.

It is also a shame how loosely defined how implicit submission is; That the form designer gets no control over which is the default button is and that fieldset’s have no impact on which button is submit.

5

I would prefer to get the actual input that was focused when the form submit was triggered. That means, if the focus is on a text input field and the user hits enter, the event.submitter should refer to that input field.

Also be aware that the specification allows to submit forms without submit buttons (through implicit submission).

Mozilla has already implemented something like the requested feature using the property event.explicitOriginalTarget. (See this answer to the SO question linked above.)

6

I’d be fine with that, too. One can deduce the default button from that knowledge herself.

Thanks for mentioning explicitOriginalTarget! Yes, that’s the best, although Firefox-only solution right now. But it shows, that implementation should be a cake.