[thelist] Some more simple JavaScript

[Simon Perry]

Chris Kavanagh wrote:

> Dear list,
>
> I tried to Google for this but it didn't work out.  In this form I 
> have a selectable list that contains all the months, like so:
>
> <select size="1" name="Month">
>           <option value="01">Jan</option>
>           <option value="02">Feb</option>
>           <option value="03">Mar</option>
>           <option value="04">Apr</option>
>           <option value="05">May</option>
>           <option value="06">Jun</option>
>           <option value="07">Jul</option>
>           <option value="08">Aug</option>
>           <option value="09">Sep</option>
>           <option value="10">Oct</option>
>           <option value="11">Nov</option>
>           <option value="12">Dec</option>
> </select>
>
> I'd like the current month to be initially selected, and I need to use 
> JavaScript to do it.  I managed to figure out how to get the current 
> month by virtue of some JavaScript:
>
Hi Chris,

The solution has a lot to do with the DOM [0] as well as javascript so 
if the DOM is new to you as well then get reading ;-) Brain Jar [1]  had 
the best introductions I found when I was getting into this stuff.

I have cobbled together an example for you that uses some old date code 
I had lying around plus a bit of DOM manipulation I just knocked up. 
There are comments in the code to help you follow what is going on.

<script type="text/javascript">
<!--
function getDates(arg)
{
// create new Date() object
dtNextWeek = new Date();
// Add 7 days to out date object
dtNextWeek.setDate( dtNextWeek.getDate()+7 );
// return whatever part of the date the function call asks for.
switch (arg)
  {
    case "d":
      return dtNextWeek.getDate();
        break;
    case "m":
      return dtNextWeek.getMonth()+1;
        break;
    case "y":
      // I had to explicitly cast this value to a String as javascripts 
atomatic
        // handling failed when I used this in one app or another YMMV
        return String(dtNextWeek.getFullYear()).slice(2);
    }
}
function selectFormElements()
{
// set vars for the date parts we want to match later
selectDay=getDates("d");
selectMonth=getDates("m");
selectYear=getDates("y");
// Get object reference for the form select element
monthSelectObject=document.getElementById('month');
// Get a list of options for above select element
monthOptionArray = monthSelectObject.getElementsByTagName("OPTION");
// Walk through list of options looking for the one with a value for the 
current month
for(i=0;i<monthOptionArray.length;i++)
  {
    if(monthOptionArray[i].value==selectMonth)
      {
        // Bingo this option elements value equals the current months value
        // set this elements select attribute to true
        monthOptionArray[i].selected=true;
        }
    }

}


// -->
</script>

You will need to place onload="selectFormElements()" into the body tag 
of your document. The date funtion I used adds 7 days to the current 
date so you may want to remove this for your application.

*Disclaimer* I haven't tested this in anything but Firefox, it should 
work in all modern browsers. You may need to add extra code so it 
degrades gracefully inder NS4 or IE<5.

HTH

Simon




[0] http://www.brainjar.com/dhtml/intro/
[1] http://www.brainjar.com/dhtml/intro/