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.
10 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.
