title: Form only submits when there is one input
body: <p>I have a <code>&lt;form&gt;</code> element surrounding several inputs:</p>
  
  <pre><code>&lt;form&gt;
    &lt;div class="tr" id="widget306"&gt;
      &lt;div class="td col-grab"&gt;
  
          &lt;button type="button" class="button grab formwidget" id="widget611"&gt;m&lt;/button&gt;
  
      &lt;/div&gt;
  
      &lt;div class="td col-name"&gt;
  
          &lt;input type="text" name="name" value="target volume profile 1" id="widget607" class="formwidget textbox"&gt;
  
      &lt;/div&gt;
      &lt;!-- ... etc ... --&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>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 <code>&lt;form&gt;</code> tag), but when I press enter, nothing happens (<a href="http://jsfiddle.net/aaronj1335/wPPXK/3/" rel="nofollow">fiddle</a>).  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 (<a href="http://jsfiddle.net/aaronj1335/wPPXK/4/" rel="nofollow">fiddle</a>).</p>
  
  <p>How do I get the desired behavior (pressing enter submits the form) in the first example where I have multiple forms?</p>
  
  <p>Note: I have found this same behavior in Safari 5.1, Chrome 17, Firefox 9, and IE 9.</p>
  
  <p><strong>Clarification:</strong> I know I can just throw some Javascript at it, but I'd like solve it with just markup.</p>
  
  <p><strong>Update:</strong> as some of you have helpfully pointed out, I can get the desired behavior by adding an <code>&lt;input type=submit&gt;</code>.  The problem is I don't want the user to see the submit button.  I can't just set its <code>display</code> to <code>none</code>, because then browsers won't submit when return is pressed, so I borrowed from QUnit and set the following:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input type=submit class=hide-me /&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.hide-me {
    position: absolute;
    left: -10000px;
    top: -10000px;
  }
  </code></pre>