I have a <form> element surrounding several inputs:
<form>
<div class="tr" id="widget306">
<div class="td col-grab">
<button type="button" class="button grab formwidget" id="widget611">m</button>
</div>
<div class="td col-name">
<input type="text" name="name" value="target volume profile 1" id="widget607" class="formwidget textbox">
</div>
<!-- ... etc ... -->
</div>
</form>
I would like to trigger a submit event on the form when the user presses enter while focused on an element (standard behavior for input elements wrapped in a <form> tag), but when I press enter, nothing happens (fiddle). If I remove all but one input element, the code works, and I get the expected behavior of pressing enter and triggering a form submit (fiddle).
How do I get the desired behavior (pressing enter submits the form) in the first example where I have multiple forms?
Note: I have found this same behavior in Safari 5.1, Chrome 17, Firefox 9, and IE 9.
Clarification: I know I can just throw some Javascript at it, but I'd like solve it with just markup.
Update: as some of you have helpfully pointed out, I can get the desired behavior by adding an <input type=submit>. The problem is I don't want the user to see the submit button. I can't just set its display to none, because then browsers won't submit when return is pressed, so I borrowed from QUnit and set the following:
HTML:
<input type=submit class=hide-me />
CSS:
.hide-me {
position: absolute;
left: -10000px;
top: -10000px;
}
I have noticed that forms don't like to submit without a submit button. The problem is simply resolved by adding a submit button. See this fiddle for a demonstration. Furthermore, browsers submit when a user presses enter by default, so fix that and you won't need a javascript trigger to cause it.
EDIT:
If you don't want to use a <input type="submit"> simply because it's styling deficiencies, consider a <button type="submit">, it should also do the trick. If you just don't want a submit button at all, stick with the CSS hack.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With