Question

Every time I submit a form by pressing enter, the click() function on the first <button> in the associated form is getting triggered. The problem (other than the fact that I just find this behavior odd) is that it is literally a click event, indistinguishable from actually clicking on the button. If it triggered the even on my submit button, I’d be fine with it.

The issue is that in this case the first button has nothing to do with the actual form, it’s actually in a hidden popup.

So the exact question: Why is this happening? How do I prevent it? How do I distinguish this “fake click” event from a real one?

(this is a very simplified example; actual code is using jQuery (in case jQuery happens to acknowledge this and there is a fix for it), but the actual issue has nothing to do with jQuery)

<form>
    <input>
    <button onclick="alert('button A click');">Button A</button>
    <button onclick="alert('button B click');">Button B</button>
    <input type="submit" value="Submit Button">
</form>

http://jsfiddle.net/NexHC/2/

Please, no suggestions to “move the button”

Answer 1

-snip-

Edit

<form>
    <input>
    <button type="button" onclick="alert('button A click');">Button A</button>
    <button type="button" onclick="alert('button A click');">Button B</button>
    <input type="submit" onclick="alert('button Submit click');" value="Submit Button">
</form>

Actually I take it back… the reason is a lot more concrete and simple than that. Submit is the default type for <button> as specified by the w3c. Therefore, by leaving the button type attributes blank on your form, you were making three submit buttons and it was picking the first when you hit enter (love the <kbd> styling on this site :P). See here for w3c info and here for the updated fiddle