1

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?

Improve this question
0

1 Answer 1

Reset to default
0

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments