Hitting enter in form calling wrong button

Question

HTML:

<form target="" method="post">
    <input name="username" type="text" />
    <input name="password" type="password" />
    <button>Cancel</button>
    <input type="submit" />
</form>

Fiddle: http://jsfiddle.net/n9Lpcqyr/

Problem: When I hit enter, both buttons get triggered. Tested with this jQuery:

$('button').click(function(){
    alert('help');
});
$("form").submit(function(){
    alert('hey');
});

Because the first <button> is mapped to .remove() the dialog, the form no longer exists to be submitted. I know I can bind the enter key to the inputs with js, but I'm looking for an HTML-only solution. I tried tabindex with no luck. What else can I do?

score 0 · Answer 1 · answered Sep 16 '14 at 22:11

You could move the cancel button outside of the form, like so (and use CSS to style):

<form target="" method="post">
    <input name="username" type="text" />
    <input name="password" type="password" />
    <input type="submit" />
</form>
<button>Cancel</button>

Hitting enter in form calling wrong button

1 Answers1