Friday, May 15, 2009

HTML forms - Things you should know

This is a list of things every web developer should know about forms. I didnt know these things, and thus wasted many hours banging my head against the desk. Hopefully this post will save someone else that time.

1. Disabled inputs are not submitted.

The HTML spec defines that only 'successful' controls's values will be sent in the form on submit. disabled controls arent 'successful' and are not submitted. If you want to submit a disabled control you will have to either:
  • Enable it right before submitting the form, and then disable it.
  • Copy its value into a hidden input before submit

2.
A form with only 1 text input will submit on enter in that input.

This is another little gem from the HTML spec that drove me nuts for a while. I couldnt figure out why the form was submitting on enter in an input type='text' when no key handlers were attached to the input, what was worse, my on submit validation was skipped. It turned out that if a form has a single input of type 'text' then pressing enter in this input will submit the form. To get around this you must:
  • Add another input of type text and hide it with css

3.
Internet exporer will not submit a form if it contains a file chooser with an invalid file path.

This is a fun one. IE does some rudementary form validation for you, and if it finds that you have selected a file which does not exist, it will not let you submit the form. This by itself is not a bad thing, but what is bad, is that it does not let the user, or the programmer know that the form was not submitted. As a UI programmer, I want to have an error message if the form submition fails, but I have no way of knowing it. To get around this you must:
  • Validate the path yourself using regex, and try to find invalid file paths, and raise error yourself before IE
  • Copy the value of the filechooser into a hidden input, disable the file chooser, and deal with invalid paths in serverside validation.(wont work as pointed out)

Form submitted unexpectedly on enter

Problem:
I have a form that would be submitted when i pressed enter in a text input field. It would skip over all my validation that i was doing in the input's onKeyDown callback function. I removed the onKeyDown event handler, and still the form would be submitted on enter. The input was not a submit type input so the submission was not expected.

Solution:
This problem stemmed from the fact that the input box in question was the only text type input box on the form. The HTML4 spec states that if you have one input box of type text, pressing enter in this input box will submit the form!

I solved this by adding another input of type text with style="display:none" and a name:

<input type="text" style="display:none" name="dummyinput" value="" id="dummyinput" >

The reason for this hack being that I had bound on-enter handlers to the first inputfield of my own, and trying to prevent those would break my code also.

Monday, May 11, 2009

Eric's Roommates's Favorite Grilled Shrimp

  • 2T Samba sauce (red sauce from chinese places)
  • 2T Mirin (sweet wine-like stuff japanese cook with)
  • 1T Sesame oil
  • 1/4c Chopped fresh cilantro (dried does not suffice)
  • Juice from 1 lime
  • 1-2 pounds raw shrimp

Marinate 1hr max if at room temp, up to 3-5hrs if in fridge. Grill.