Hello,
Whilst writing this I actually fixed the issue but I thought I'd post anyway as this technique might be useful to others...
I have a javascript class I wrote (alas I can't post the whole code as the IP technically belongs to the company I work for) which presents 3 drop down boxes, 1 for day, 1 for month and 1 for year. If you select an invalid date (eg 30th feb), it automatically updates itself to a near correct date (eg 28th feb) the class handles leap years.
This sadly doesn't work in chrome and I'd appreciate if anyone is interested could offer some small amount of guidance to get me going in the right direction....
You add your date picker to your form like this:
<script type="text/javascript">
var processDateVbl = new dateDropper('processDate', "<?php echo $currentDate; ?>");
</script>
The class definition itself is pretty weird and works perfectly on IE.
Its constructor sets a few variables like how many days there are in each month and the min and max years to be added to the year select box etc and does some validation on the date string passed to it (in the php echo). Importantly, the constructor uses the first parameter (processDate) and suffixes it with Vbl and stores it as a parameter so that it can call itself later on...
It then calls a method called drawFields()
drawFields uses document.write to output form elements to the page;
document.write ("<input type=\"hidden\" name=\"" + this.formId + "\" value=\"" + this.defaultDate + "\">");
This line in particular creates a hidden form element with the name from the first parameter used to call dateDropper, so, when the form is submitted, the next page's php can use $_POST['processDate'] to reference the whole date and not access all 3 fields separately.
Next is where the class can 'call itself' for want of a better expression...
document.write ("<select name=\"" + this.formId + "Day\" onchange=\" " + this.variableName + ".dayChange() \">");
this.formId is processDate and this.variableName is processDateVbl.
So when the object is instantiated it creates select boxes whose onchange command is to refer back to the object's dayChange method. This works fine.
however, the first thing that the dayChange (also monthChange and yearChange) does when you change the select box value is to getElementById("processDateDay").options to find what you have changed it to.
This is where things go wrong. This works fine in internet explorer (7 and 8) but does not work in chrome or firefox. The javascript console there essentially tells me that getElementById("processDateDay") is null.
At this point I realised I was searching by element ID and had defined element names... What a twit.
I updated my drawFields() method to output like so:
document.write ("<select id=\"" + this.formId + "Day\" onchange=\" " + this.variableName + ".dayChange() \">");
now it all works!
I'm unsure where else anyone might want to do this, it's a pretty unusual concept so far as I know.
Hope this is of assistance!