One-Field Forms and IE Quirks

I encountered an old quirk in Internet Explorer again — one I hadn’t seen since I was doing most of my web programming in PHP. I had developed a style of PHP (and later Rails) coding that avoided it, but Seaside’s architecture makes you more likely to fall victim.

We often take for granted that the Enter key submits our forms. The Enter key always acts as if the first button in the form had been pressed. Whether this is written into the HTML spec or whether it just developed as a convention, I don’t know. But users expect it to work something like that, in that Enter is always expected to perform a normal submission (i.e. “Save”) instead of an exceptional one (i.e. “Cancel”).

Internet Explorer has a funny quirk with this submit-on-enter mode, and although many people claim to have found it and worked around it, many people seem to over-generalize it. You’ll find many web design blogs and forum posts asserting that “IE doesn’t post the submit button names if you press Enter”. That’s partly true. If you push Enter on some forms, IE leaves off the button data entirely. Click a button and IE faithfully submits the button data, but press Enter and the posted form data tells nothing of the user’s intent.

In PHP or Rails, I typically structured my forms with the “Save” button appearing first, and the “Cancel” button appearing second. When handling the POST, the code checked for Cancel and, if it wasn’t found, proceeded with the operation. That meant that the forms really didn’t care about any specific button’s value except “Cancel”, which always requires a real button click anyway. Problem solved.

But in Seaside, each button has a specific callback attached. If you don’t get the button data in the form posting, Seaside doesn’t evaluate any button callbacks.

Fortunately, there is a workaround: make sure you use two or more input fields on your form. When there are multiple input fields, IE is happy to behave in a sane manner and submit the name of the first (i.e., the expected “default”) button. It’s only in one-field forms that this problem occurs.

The only problem is that, well, some forms need to be one-field forms.

Seaside solves this problem rather nicely using the defaultAction callback. If you create a form and assign it a defaultAction, Seaside does two things: First, it creates a submit button as the very first child of the form that is set to fire the callback. Secondly, it creates an empty text input. Both of these get positioned wildly off the page using CSS, so they’re never visible but they still have their desired effects.

By assigning a default action, you can actually break the mold and arrange your submit buttons in whatever order you like. Or you can create forms that submit on Enter but don’t have any (user-visible) buttons at all. It’s a cool trick, and the fact that it solves the one-field form quirk seems secondary to its main purpose. Most of my forms don’t do anything fancy like that, so a default action isn’t necessary.

But forms with only one field need it for IE usability.