why does pressing enter inside a text box click the first button and submit the form

Question

Open the javascript console, put your cursor in the text box, and press enter. Why is the function "baz" called? How should it be suppressed?

function foo() {
  console.log('foo');
}
function bar() {
  console.log('bar');
}
function baz() {
  console.log('baz');
}
function blee() {
  console.log('blee');
}

<form onsubmit="foo()" action="javascript:blee()">
 <input type="text" />
 <button onclick="baz()">baz</button>
 <button onclick="bar()">bar</button>
 <input type="submit" />
</form>

What's the question? Why it is like this (most likely because the spec says so) or how to prevent it? The latter is a duplicate of [How to prevent ENTER keypress to submit a web form?](http://stackoverflow.com/q/585396/218196) — Felix Kling, Mar 22 '15 at 02:56

score 2 · Accepted Answer · answered Mar 22 '15 at 02:57

2

The browser thinks the button that follows the input is a submit button. If you were to switch the baz button with the bar button, it would call the bar() function.

You can fix this by adding 'type="button"' to both of your buttons.

answered Mar 22 '15 at 02:57

Atish

1,239
1
12
10

why does pressing enter inside a text box click the first button and submit the form

1 Answers1