How formaction attribute interacts with Enter-triggered submit event
When I was playing around with formaction
attribute I learned something interesting about the way the attribute interacts with Enter-triggered submit events. I'm documenting my findings here to help others - and my future self - debug this undocumented behavior. Note: Everything discussed about formaction
applies identically to formenctype
, formmethod
, formnovalidate
, and formtarget
attributes as well.
First, a recap from the previous article. To trigger a submit event via Enter the three ingredients listed below need to be present.
-
an Enter-able
<input>
element -
an additional submit-triggering button, unless
<input>
istype="submit"
ortype="image"
-
a
<form>
that contains the<input>
element(s)
formaction
attribute allows a submit-triggering element to submit <input>
values to a URL different from the one determined by the <form> element it is in. When formaction
attribute isn't used, that URL is determined by the action
attribute on the <form>
, and if there is no action
attribute then it defaults to the URL of the current page + the <input>
values encoded in a search string.
Let's consider two scenarios listed below in which Enter triggers a submit event.
One submit-triggering element with formaction
attribute. As expected, in this case the formaction
attributes wins over <form>
's action
attribute.
Multiple submit-triggering elements with formaction
attribute. However, in this case it's the first formaction
attribute that wins not only over the <form>
's action
attribute but over other formaction
attributes.