Click event on button is trigged when submitting a form with enter

Question

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.net/q3JPR/

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

Answer 1

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

Working Fiddle

Answer 2

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