Form not submitting on enter key with multiple form fields
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.
So I’ve got a stupid bug I’m trying to fix. Seems innocuous enough. Nope, one of those stupid, finicky, browser things. I have an AJAX form with multiple fields that has no submit button; instead onsubmit deals with what to do with the form. So my form looks simply like so:
<% form_field('password', @thing) do %>
<%= password_field(:thing, :password) %>
<%= password_field(:thing, :password_confirmation) %>
<% end %>
One may expect that if you entered information in these fields and pressed the enter key, it’d submit. It doesn’t. At least not in Firefox… which means IE has no hope. Safari, however is “smarter” and it actually works. But I digress…
If you had this form with a single field, it’d work like a charm:
<% form_field('password', @thing) do %>
<%= password_field(:thing, :password) %>
<% end %>
So the answer is simply that you can’t submit a form by pressing enter when having more than 1 input field. At least not with a submit button.
The solution?
Add an invisible input button:
<input style="display: none" type="submit" />
Stupid. Dirty. Hack.
***Update: This, of course, doesn’t work on shitty IE browsers. They do not like the style=”display: none” and probably do something “clever” like optimize it into non-existence. They will, however, accept it if you use a style=”width:0px;height:0px;border:none”.
Even more stupid and dirty and hackish. But it’s a Microsoft product, what do you expect?