I have a form with two buttons, one input[type=submit] and one plain button which is the cancel button.

I have two event handlers, one bound to the form on submit and one bound to the button on click.

When I submit the form by pressing enter in an input the click event on the button fires (and before the submit event I might add), why is this?

This happens in both gecko and webkit.

Here's a working example: /

If you submit by pressing enter I want the submit event to trigger, not the click event.

I have a form with two buttons, one input[type=submit] and one plain button which is the cancel button.

I have two event handlers, one bound to the form on submit and one bound to the button on click.

When I submit the form by pressing enter in an input the click event on the button fires (and before the submit event I might add), why is this?

This happens in both gecko and webkit.

Here's a working example: http://jsfiddle/q3JPR/

If you submit by pressing enter I want the submit event to trigger, not the click event.

• javascript
• html
• forms
• dom-events

• This also happens to me, I've spent roughly an hour searching the whole web and have not found any documentation for this behaviour, let me know if you found something. – asumaran Commented Oct 14, 2013 at 7:32

2 Answers 2

If you change your button to be <input type="button"... then your events will behave properly... here is the fiddle:

Working Fiddle

I also found this solution. If you set the type attribute to "button" <button type="button">My Button</button> it won't submit. I think not specifying the type by default sets it to submit. So you don't have to change the element to input.

Source: Add regular button inside form that does not perform a submit