2007-09-20
Submit Form on Enter Key
uh... did you know that you can't submit a form by pressing Enter when having more then 1 input field?
So let's say you have a simple form like this:
-
<form action="" method="post">
-
<input type="text" />
-
</form>
Now when the input text has the focus and you press Enter this form will submit. But once you have more than just one input field, it will not.
-
<form action="" method="post">
-
<input type="text" name="a" />
-
<input type="text" name="b" />
-
</form>
I solved this by adding an invisible submit item.
-
<input type="submit" style="width:0px;height:0px;border:none">
Crazy, but I did not know that.
15 Comments
-
Wow, a simple, sharp solution.
Liked it.
-
I do not know how many times to say it but THANK YOU, THANK YOU,THANK YOU, THANK YOU.
I have been looking for this for quite some time. -
A simpler way to do this would be to use:
-
A simpler way to do this would be to use:
[code][/code]
-
Never mind, instead of using: style=”width:0px;height:0px;border:none” you can use style=”display:none”
-
[...] So this is one of those really stupid things that was virtually impossible to find on google. One permutation was the golden child and brought me to this wonderful blog post. [...]
-
It seems, that if you write:
style=”display:none”
instead of:
style=”width:0px;height:0px;border:none”,
our favourite IE will ignore the input tag and enter key will not work. -
So then try “visiblity: hidden”, although that will leave an ugly block of whitespace in the way.
-
Nope, just tried it, doesn’t work in IE 7
-
This worked best in Safari, Opera, Firefox and IE:
style=”width: 0px; height: 0px; position: absolute; left: -50px; top: -50px;”
Absolute positioning became necessary because the button was still visible in Firefox and Safari and in particular Safari completely crashed when clicking the button having an empty value attribute.
-
Thanks, been wondering about this for a while and finally got round to fixing it.
-
Cool, thanks for sharing, this works really well for accessible websites. Create a funky submit button which does a javascript submit, and hide the normal submitbutton with this technique!
I’ve been using the style
[code]width: 0px; height: 0px; position: absolute; left: -500px; top: -500px;[\code]
to move the submitbutton completely offscreen (Safari still showed a dot). Works great in IE6 aswell. -
The border was still visible in Opera, so I did this:
<input type=’submit’ value=’Login’ style=’width:0px; height: 0px; border: none; padding: 0px; font-size: 0px’>
Tested in IE6/7, Opera 9, Firefox 3
-
This is a customer site that we’re building and on the login page I thought I was going to use a hidden submit button. The correct CSS code to implement this is “display:none”. Other code above gives hidden wierdness in margins, etc. from browser to browser.
-
Strangely enough, my problem was that with only ONE password field and no other text fields, if I had a button, pressing ENTER didn’t work!
So, inspired by your method, I added a second hidden text field before my password field and hey it worked!
Thanks a lot for this!
