Misguided Javascript
Designers and developers often have to make sacrifices; let's hope they choose wisely.
I have relocated recently and needed to file a Change Of Address with the United States Postal Service. I zipped over to the website and started filling out my information when I was nipped by a juvenile web developer.
It all started one the first of five steps when filling out or filling in the form. I was entering the date I'd like the change of address to come into effect:
Notice that the effective date asks me to put in using the format dd/mm/yyyy. First off, I have to wonder if people really file change of addresses years in advance, but I assume they do. To resume, I realized that the format was specified, but because I am the way that I am, I was hoping that I could shoot out the numbers and have the application/form the USPS was using intelligently parse the numbers for me. Unfortunately, trying to submit the information this way produces a javascript alert box:
Again, more than one thing wrong with this picture: why are the lines of the alert text broken, but the error text is uninterrupted? The only reason I can discern is that they really wanted the -'s to form neat lines. Anyway, that's just a silly design preference more than anything. What I found really curious was that there was javascript in place to detect that I had not entered the numbers correctly instead of a.) using javascript regular expressions to parse the numbers into whatever variables or array they were using, or b.) creating a more intuitive interface with less points of failure (two drop down boxes for month and day, with a text field for a year would have been easier). I can actually swallow all of this, I mean after all, it's just the USPS. I imagine there were some benchmarks performed and someone figured out that sending code to check using regular expressions would have cost $X amount, and that writing the HTML to produce the form elements would have been just as costly.
And then I was on page two where I ran into this gem:
<script type="text/javascript">
<!--
var downStrokeField;
function autojump(fieldName,nextFieldName,fakeMaxLength)
{
var myForm=document.forms[document.forms.length - 1];
var myField=myForm.elements[fieldName];
myField.nextField=myForm.elements[nextFieldName];
if (myField.maxLength == null)
myField.maxLength=fakeMaxLength;
myField.onkeydown=autojump_keyDown;
myField.onkeyup=autojump_keyUp;
}
function autojump_keyDown()
{
this.beforeLength=this.value.length;
downStrokeField=this;
}
function autojump_keyUp()
{
if (
(this == downStrokeField) &&
(this.value.length > this.beforeLength) &&
(this.value.length >= this.maxLength)
)
this.nextField.focus();
downStrokeField=null;
}
//-->
</script>
The above is your basic 'automatically change text fields when max characters are reached' script. It's a very helpful script, when used correctly. The script automatically changes the focus for the phone number form elements after you enter three digits for your area code, to the middle triplet and on to the final four. The problem was that there are no visual cues that this is happening. The script just does it. Usually this technique is used in conjunction with javascript changing the border or background colors of the elements that have focus so that your eyes can follow the action on screen. I carelessly tabbed too far because I couldn't tell easily where the focus was on the phone number elements.
What irritates me is that somehow useful scripting was left out while a feature that alone is rendered useless, made it into the bandwidth pipe. I hope that my personal tastes are more intuitive than the example with the USPS. On to page three.