3

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;
}
aaronstacy
  • 6,189
  • 13
  • 59
  • 72

5 Answers5

3

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.

Umbrella
  • 4,733
  • 2
  • 22
  • 31
1

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

Community
  • 1
  • 1
Christopher Rathermel
  • 915
  • 12
  • 30
0

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();
         }
     }
}
SynXsiS
  • 1,860
  • 10
  • 12
0
  1. Add an element <input type="submit" name="xx" value="submit" /> it will trigger submit behavior automatically.
  2. you can also use jQuery to handle press event.

Sean.

Sean
  • 1,806
  • 1
  • 13
  • 15
0

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.

Bert
  • 1,019
  • 3
  • 14
  • 25