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.
26 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!
-
NICE ! and very simple ! Thank You !
-
Its very nice code ,simple & easy.
But Please tell me how we can submit form without any button but by pressing enter key in which there will be only 1 textarea.Kindly send response in my email-id.
-
OK.
Thanks for your advice.
It is works so good.
Be happy in 2009. -
I am just trying to get one textarea field to submit when I hit Enter. Instead, it is clearing the field. The response that was sent to NR might be useful. Please send here and/or to my email address. Thanks.
-
i tried the same thing.. but in Safari browser it doesnt work.
on Each enter keypress its firing action. irrespective of submit button.pls guide..
-
wow ! so that was it ! :)
thanks a lot ! it just work
-
Thanks for this!
-
It just doesn’t works, dewd!
-
works in IE7 and FireFox 3
-
input type=”submit” style=”width: 0px; height: 0px; position: absolute; left: -50px; top: -50px;”
-
Hi
I have a form with 3 buttons and the submit button is the 3rd one, have 1 input field, in classic ASP, when i press enter on the input field, i use<input id=”searchText” type=”text” name=”" onkeyup=”onKeyUp(event);” />
and in Keyup , i try to capture the key if Enter then do my processing (button3)
but it seems to do both Button3 & Button1
Somehow its always doing Button1 as default,
button 1 & 2 are defined as
button 3 as
Tried with all 3 as button, all 3 as input
nothing works.
