CODEWITHSUNDEEP
htmlforms
aaronstacy
aaronstacy

Reputation: 6428

Form only submits when there is one input

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

Upvotes: 3

Views: 2971

Answers (5)

Umbrella
Umbrella

Reputation: 4788

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.

Upvotes: 3

Bert
Bert

Reputation: 1029

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.

Upvotes: 0

Christopher Rathermel
Christopher Rathermel

Reputation: 935

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

Upvotes: 1

Sean
Sean

Reputation: 1822

  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.

Upvotes: 0

SynXsiS
SynXsiS

Reputation: 1898

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

Upvotes: 0

Related Questions