Web forms and 'an' or 'a'

I'm a stickler for the little things.

What's wrong with this drop down box?

If you don't notice, then this article probably isn't for you. However the more pedantic audience members will note that "I am a Installer" is terrible English.

This should of course be "I am an Installer"

A solution

Given the following (greatly simplified) HTML;

<label for="role">I am a...</label>
<select name="role" id="input_role">...</select>

Simply add a little javascript along the lines of the following;

$('#input_role').change(function() {
  if ("aeiou".indexOf($(this).val().charAt(0)) != -1) {
    $('#input_role_label').text('I am an...');
  } else {
    $('#input_role_label').text('I am a...');
  }
});

Now, whenever you change then drop down it will update the text above it to use the correct form of an or a as appropriate.

This is a really quick hack as I've only ever had one input box on the form that required it, but it wouldn't be difficult to expand it to look at all input forms, the associated <label> element and then use a regex to replace "a" with "an" or vice-versa in the original string.

It's the little things

Little touches like this matter to me, but probably not to everyone. Much like ensuring phone numbers are displayed sensibly it's not part of the normal concerns of modern web design but my inner copywriter would be pleased.

(Yes, I could have just used "a/an..." in the prompt, but that looks clunky)