As I mentioned before, this particular case has a few things going on with it. Let’s quickly revisit that snippet of code from the first post:
var inColors = new Array(FF0000, FFA500, FFFF00, 00FF00, 0000FF,
EE82EE, 000000, FFFFFF)
var outColors = new Array (“RED”, “ORANGE”, “YELLOW”,”GREEN”,”BLUE”,”INDIGO”,
”VIOLET”,”BLACK”,”WHITE”)
document.write(“<select name=’userColor’>”)
for (var x=0; x<inColors.length(); x++)
{ if (theColor == inColor[x])
then
document.write(“<option value=’”+inColor[x]+” selected>”+outColors[x]+”</option>”
else
document.write(“<option value=’”+inColor[x]+”‘>”+outColors[x]+”</option>”
}
document.write(“</select>”)
Take a look at the declaration of inColors and outColors. Still not seeing it? Count how many items are in each array. There’s one missing from inColors, which is the list of items expected from the server. This omission has two nasty effects, actually. First, if theColor is indigo (that’s the missing one), there’s no match for it, so that pull-down will have nothing selected. Second, if theColor is white, the loop will never get to it, because it’s controlled by the length of inColor. Hence, there will be nothing pre-selected in that case as well.
OK, so you have a pull-down with nothing selected. The user will just select one, that’s what they’re there for. Everyone’s happy. Except, if your chances for success depend on a human paying attention to what they’re doing every time, you’ve got yourself an escalating probability of catastrophic failure.
In the second act of our tragedy, inevitability strikes, and the user fails to select anything and then goes ahead and hits the “submit” button. One of the values being checked is undefined, and an error gets thrown. No harm, no foul, right? Oh no, my friends, because here is where Wednesday’s clue comes into play.
Originally, the framework had this as the submit button:
<input type="button" value="submit" onclick="validate_form_values(this.form)" />
But the programmer changed that to:
<input type="submit" value="submit" onclick="validate_form_values(this.form)” />
In either case, the form will not submit if the Javascript returns a false (meaning validation failed). But if the Javascript routine itself fails (has a fatal error), the script stops running, and the button performs its default action. The default action of a button type is to do nothing. What’s the default action of a submit type? (I had to step through this whole damn script line-by-line to find this out!)
The lesson to be learned here (aside from the fact that Javascript is evil, which you should already know) is to always check that your input data is indeed what you expect; you can never assume that.