-1

I have always believed that the default behavior of hitting the 'Return' key was to submit the form. But it seems to be more complex: if there is a nearby button, the 'Return' key instead seems to simulate a 'click' event on that button, instead of submitting the form. Here's an example:

document.querySelector('form').onsubmit = ev => {
  ev.preventDefault();
  document.querySelector('#result').innerText
    = ev.target.elements.text.value;
};

document.querySelector('#troublesome').onclick = 
  ev => {
    ev.preventDefault();
    ev.target.innerText = Math.random();
  };
<form>
  <input type="text" name='text' value='something' />
  <button id="troublesome">Trouble</button>
  <button>Submit</button>
</form>

<div id="result">not submitted</div>

Above, when you hit return in the <input> element, the browser chooses to click the "Troublesome" button. But why? What exactly is happening here? And where can I read it in the specs?

jameshfisher
  • 34,029
  • 31
  • 121
  • 167
  • Have you tried swapping the two buttons to see the effect when you focus the input and press enter? – dale landry Oct 31 '21 at 17:24
  • @dalelandry yep - it then picks the other button. It's as if it picks the closest button to the input, but I don't know where to find this behavior described in the specs – jameshfisher Oct 31 '21 at 17:55
  • Because return clicks the first submit button in that form. All your buttons are submit buttons. – connexo Oct 31 '21 at 19:07
  • I just found https://stackoverflow.com/questions/925334/how-is-the-default-submit-button-on-an-html-form-determined which asks and answers this question in much more precise detail, so I've voted to close my own question – jameshfisher Nov 01 '21 at 09:08
  • @connexo thanks - it turns out that is the case from HTML5 onwards: https://stackoverflow.com/a/925353/229792 – jameshfisher Nov 01 '21 at 09:10

1 Answers1

3

Both button elements have no type set. Type=submit "is the default if the attribute is not specified for buttons associated with a <form>" (MDN Webdocs) and troublesome is the next after the input field. If you change its type to 'button', 'submit' will submit.

From MDN as well: "Note that the submit event fires on the element itself, and not on any or inside it. However, the SubmitEvent which is sent to indicate the form's submit action has been triggered, includes a submitter property, which is the button that was invoked to trigger the submit request. If the submission was not triggered by a button of some kind, the value of submitter is null. (If there's no element type=submit and Enter is pressed inside the input, the form will submit with event.submitter = null)

The logic seems to be "find the closest button to the focus that has type="submit", and simulate a click event on that button, else fall back to just submitting the form" (didn't find this explicitly somewhere) In your example 'troublesome' is of type 'submit' and closest to the input, and if there wasn't the 'prevent.default()', both events (click & submit) would be triggered.

document.querySelector('form').onsubmit = ev => {
  ev.preventDefault();
  document.querySelector('#result').innerText
    = ev.target.elements.text.value;
};

document.querySelector('#troublesome').onclick = 
  ev => {
    ev.preventDefault();
    ev.target.innerText = Math.random();
  };
<form>
  <input type="text" name='text' value='something' />
  <button type="button" id="troublesome">Trouble</button>
  <button>Submit</button>
</form>

<div id="result">not submitted</div>
Corrl
  • 6,206
  • 1
  • 10
  • 36
  • Thanks - are you saying that the behavior is "find the closest button to the focus that has `type="submit"`, and simulate a `click` event on that button, else fall back to just submitting the form"? Is this behavior described in the specs somewhere? – jameshfisher Oct 31 '21 at 17:57
  • @jameshfisher yes, that seems to be the logic but unfortunately I didn't find this explicitly written anywhere as well. – Corrl Oct 31 '21 at 19:10
  • 1
    Thanks @Corrl - I just found https://stackoverflow.com/a/925353/229792, which says that the HTML5 behavior is "A form element's default button is the first submit button" – jameshfisher Nov 01 '21 at 09:10