Question

I have a button element inside a form like this:

<form>
    <input type="text">
    <button>Test</button>
    <input type="submit" value="Submit"/>
</form>

With the following JS:

$('form').submit(function() {
    alert('Form submitted.');
    return false;
});

$('button').click(function() {
    alert('Button clicked.');
});

And the jsFiddle: http://jsfiddle.net/JnnRX/

When the user focuses the text field, types in some text, and presses enter, the button handler will execute first, followed by the form handler. However, I’d like it to just
execute the form handler and ignore the button. Is there any way to get this behavior, or is it best to change my button element to something else?

Answer 1

Make the button of type button

<button type="button">Test</button>

If it is that type, the browser won’t recognize “enter” submits, unless that button has focus. Typically the first submit button in a form’s flow will be the one to get submitted on enter.