23320 2013-09-22 06:18:22 +0000 forms: Have the form 'submit' event include a reference to the submit button used by the user to submit the form 2014-09-30 16:37:07 +0000 1 1 1 Unclassified WHATWG HTML unspecified All All RESOLVED WONTFIX P3 enhancement Unsorted 1 giorgio.liscio ian ian memmie mike contributor oldest_to_newest 93621 0 giorgio.liscio 2013-09-22 06:18:22 +0000 hello... how about referencing the button that generated the "submit" event in submitEvent.relatedTarget ? example: <button type="submit" name="action" value="listAll">List All Selected</button> <button type="submit" name="action" value="deleteAll">Delete All Selected</button> myform.addEventListener("submit", function(event){ var fd = new FormData(); fd.append("some","data"); if(event.relatedTarget) fd.append(event.relatedTarget.name, event.relatedTarget.value); // ... results in fd.append("action", "listAll"); or deleteAll, accordingly to which button was pressed // ... event.preventDefault(); }, false); 93673 1 ian 2013-09-23 19:42:20 +0000 Not a bad idea, but the 'submit' event uses Event currently, which doesn't have a relatedTarget, so this would have to involve a new Event interface type. 93704 2 giorgio.liscio 2013-09-24 03:34:02 +0000 another solution could be referencing the submit button in some property of the HTMLFormElement interface, in the same way document.activeElement works something like myform.submittedBy imho not very cool though 93755 3 ian 2013-09-24 22:21:34 +0000 Yeah doing it on the event seems better. 93777 4 giorgio.liscio 2013-09-25 05:21:36 +0000 another solution could be include relatedTarget in the Event interface anyway... I should have written a best use-case for this feature request, so here it is <button name="action" value="listAll">List All Selected</button> <button name="action" value="deleteAll">Delete All Selected</button> myform.addEventListener("submit", function(event){ // [I'm guessing] FormData doesn't include buttons name/value pairs: var fd = new FormData(this); if(event.relatedTarget) fd.append(event.relatedTarget.name, event.relatedTarget.value); else fd.append("action", "listAll"); event.preventDefault(); var xhr = ...; // ... xhr.send(fd); }, false); 94271 5 ian 2013-10-03 20:31:56 +0000 Are there any browser vendors interested in implementing something like this? (In the meantime you can work around the lack of this feature by doing this: <form onclick="if (event.target.type == 'submit') this._button = event.target"> ...on the <form> element. This sets form._button to the submit button in time for the onsubmit handler. 111907 6 memmie 2014-09-22 09:15:32 +0000 Actually we can't rely on anything for that. Listen clicks on `input[type=submit]` and `button[type=submit]`, use `document.activeElement`, etc. Mozilla provide a specific property on the submission event (and few others): `event.explicitOriginalTarget` to provide a "related" target. In http://www.w3.org/html/wg/drafts/html/master/forms.html#form-submission-algorithm there is a mention of a "submitter". Here there is a talk about it: http://discourse.specifiction.org/t/extend-submit-events-add-the-button-element-that-triggered-the-submit/406 111931 7 ian 2014-09-22 16:52:06 +0000 I don't understand. Why doesn't the proposed markup work? I tried it and it seemed to work fine on Chrome and Firefox at least. It even works with implicit submission (where you hit enter in a text field and it picks the default submit button). http://software.hixie.ch/utilities/js/live-dom-viewer/saved/3192 111934 8 memmie 2014-09-22 17:12:32 +0000 This don't work: - the submitter is not only `[type=submit]` but also: `input[type=submit]`, `input[type=image]`, `button[type=submit]` - the event target can be a descendant of a button: `<button><span>Submit</span></button>` - this works for ["authentic click activation"][1] (direct click or key stroke) and ["synthetic click activation"][2] (click via `element.click()` or `element.dispatchEvent(new MouseEvent(...))`) but not ["Implicit submission"][3] (hitting enter or space key, depends implementation, when an other form field focused) This will work on some cases, but not all. [1]: http://www.w3.org/html/wg/drafts/html/master/editing.html#run-authentic-click-activation-steps [2]: http://www.w3.org/html/wg/drafts/html/master/editing.html#run-synthetic-click-activation-steps [3]: http://www.w3.org/html/wg/drafts/html/master/forms.html#implicit-submission 112037 9 ian 2014-09-23 18:17:03 +0000 The example can be easily updated to work with type=image or nested content in <button>s if you need that. It already works for implicit submission. Here's an example that does everything you mentioned: http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=3199 Note that dispatchEvent(new MouseEvent()) is not a valid way of submitting a form. It should have no effect; it has some effect in some browsers due to a bug, which we are trying to fix. BTW the links you are giving to the spec are to the forked out-of-date version of the spec. The spec I edit is at: http://html.spec.whatwg.org/multipage/ 112050 10 memmie 2014-09-23 23:18:02 +0000 OK! I miss one important thing. In [synthetic click activation steps][1] there is: "4. Fire a click event at the element". That means, for browsers that implement HTML5, we can listen implicit submission with click events. I tried your example and that work correctly on: - Safari 7.1 - Firefox 33.0 - Chrome 38.0 - Safari Mobile 7.2 - Chrome iOS 37 But not on IE 9 (I got an error "error: Unable to get value of the property 'value': object is null or undefined on line 1", but I don't have the time to found why click don't work). Thanks [1]: https://html.spec.whatwg.org/multipage/interaction.html#run-synthetic-click-activation-steps 112085 11 ian 2014-09-24 17:09:32 +0000 Well I presume that's because IE9 doesn't implement the specs properly. Does it work in more recent IEs? 112143 12 memmie 2014-09-24 22:22:18 +0000 Yes, I confirm that works in IE10 112184 13 ian 2014-09-25 17:37:38 +0000 Cool, ok, thanks. Given how simple it is to achieve this, and how widely supported it is (especially compared to a new API, which nobody implements), maybe this feature request is something we shouldn't add to the platform. 112479 14 ian 2014-09-30 16:37:07 +0000 Closing per comment 13. If there's a compelling reason why the simple script above isn't a satisfactory solution, please reopen the bug. Thanks!