Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/rekall/krisgale.com/wp-includes/formatting.php on line 74

depending on how precious your time is, you might want to skip to the follow-up.

1. the <select> onchange handler is a kludge, at best

reference: msdn forums

it should be noted that this also an issue within firefox, so do not think that you are made clandestine by your choice of browser alone.

here’s a fun experiment for you to try:

1. go to http://krisgale.com/select-broken.html

2. click the dropdown to open it (but do not click one of the options).

3. use your keyboard to shortcut to one of the options by its letter of the alphabet.

4. click the dropdown again to close it (and do not click anywhere else).

depending what browser you used, one of two things just happened. (a) a number appeared below the horizontal rule corresponding to the option you highlighted with your keyboard, or (b) nothing.

here is the source code for the above example:

  1. <html>
  2. <head>
  3. <title>select</title>
  4. <script type="text/javascript">
  5. function selectchange()
  6. { var frm = document.forms["testform"];
  7. var fld = frm["testselect"];
  8. var val = fld.options[fld.selectedIndex].value;
  9. document.getElementById("testvalue").innerHTML = val;
  10. }
  11. </script>
  12. </head>
  13. <body>
  14. <form name="testform" action="select.html" method="get">
  15. <select name="testselect" onchange="selectchange();">
  16. <option value='1'>a</option>
  17. <option value='2'>b</option>
  18. <option value='3'>c</option>
  19. </select>
  20. </form>
  21. <hr />
  22. <div id="testvalue">&nbsp;</div>
  23. </body>
  24. </html>

now, imagine that you weren’t futzing about in a cut-and-dry example, but were on a banking website selecting source and destination accounts for an account transfer, and were never asked to confirm, or using an e-commerce backend to escalate an order’s status to “shipped,” and were not prompted to input the tracking number… then this little experiment is longer “fun.”

to really complicate matters, internet explorer’s “user-friendly” autocomplete function botches up the onchange handler even further. to avoid this, microsoft would rather prefer you use onpropertychange. if you’ve never heard of it, don’t be too hard on yourself; the entry for it on msdn clearly states that “there is no public standard that applies to this event.”

2. an empty <option> value… is not

reference: ieblog

a common (perhaps “bad”) practice with dropdowns is to offer a first, default option that has no value attribute and some text to prompt the user to select one of the options below.

<select name=”dropdown”>
<option>please select</option>
<option value=’1′>first</option>
<option value=’2′>second</option>
<option value=’3′>third</option>
</select>

later on, either employing client-side or server-side detection of that null value (delivered as an empty string), it can be made imperative for the user to actually select one of the options.

ie7 has put the kibosh on <option>’s with no value. rather than remain in compliance with the ecmascript standard, microsoft has opted instead in favor of the w3c html 4.01 specification which does indeed state that “if this attribute is not set, the initial value is set to the contents of the option element.”

which would be all fine and good if not for the simple fact that every other browser worth mentioning has stuck by the ecmascript standard (and rightly so).

p.s. this may or may not also apply to <option>’s that have an empty string for its value (as in <option value=”>please select</option>)… i am holding steadfast to windows 2000 and thus have no way to test this further upon installing ie7 myself (i’ve been leaning on friends to test things on my behalf during this research); and considering the already lackluster reports regarding ie7’s new “security features,” i am glad to be left behind.

3. an href within <a> will take precendence over onclick

reference: d’bug

sometimes, it is quite handy to assign non-links to the href attribute of a link so that the click upon that link is instead delegated to an onclick handler.

<a href=”javascript:void(0);” onclick=”doSomething();”>click here</a>

or…

<a href=”#” onclick=”doSomething();”>click here</a>

one example where this might be used is an ajax application whereby a dummy prototype object is set up in a hidden element, cloned, and the onclick event modified to perform some other function (which can be viewed as being more elegant than modifying the href).

if you’re on ie7, the above link will not doSomething(); it will in fact do nothing.

worse still, if the href attribute is a real link being provided supposedly as an alternative to the behavior triggered by the onclick, the user will always be taken there, and the onclick event will not fire.


in the follow-up to this post i will outline solutions to these issues; something microsoft has not yet had any interest in providing on its forums, and that i’ve spent the greater part of this weekend researching online and via trial-and-error hacking.