Form only submits when there is one input - html

Question

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;
}

Answer 1

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.

Answer 2

After trying it myself I couldn't believe it either.
Looks like this is the issue:
Why does forms with single input field submit upon pressing enter key in input

Answer 3

It's default behaviour for browsers to automatically submit simple forms (like search ones) which is why it's working when there is only one input. I believe if you want this functionality on complex forms you will need to use javascript. If you're not against using jQuery the following should do the trick.
$(function(){
$("#formid input").keypress(function(event){
if (event.which = 13){
$("#formid").submit();
}
}
}

Answer 4

Add an element
<input type="submit" name="xx" value="submit" />
it will trigger submit behavior automatically.
you can also use jQuery to handle press event.
Sean.

Answer 5

Try this one. i use this on my textarea with tinymce for a chat system
<script>
function getKeystroke(e)
{
var keynum;
keynum = (window.event) ? event.keyCode : e.keyCode;
switch(keynum)
{
case 13: /* enter key */
document.getElementById("s_say").click();
document.getElementById("s_message").focus();
break;
}
}
</script>
s_say is the ID of the input type submit btn.