Calendar.js not working for two instance

[Ameena]

I have a script like below

<script type="text/javascript">

var monthtext=['January','February','March','April','May','June','July','August','September','October','November','December'];

function populatedropdown(monthfield,dayfield, yearfield){
var today=new Date()
var dayfield=document.getElementById(dayfield)
var monthfield=document.getElementById(monthfield)
var yearfield=document.getElementById(yearfield)
for (var i=0; i<31; i++)
dayfield.options[i]=new Option(i, i+1)
dayfield.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today's day
for (var m=0; m<12; m++)
monthfield.options[m]=new Option(monthtext[m], monthtext[m])
monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month
var thisyear=today.getFullYear()
for (var y=0; y<20; y++){
yearfield.options[y]=new Option(thisyear, thisyear)
thisyear+=1
}
yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}

</script>

I have placed that in an html like below.

<form action="" name="Resources.php">
<div id="calendar1">
			
				 <select id="monthdropdown1">
				</select> 
				<select id="daydropdown1">
				</select>
				<select id="yeardropdown1">
				</select>
			

			<script type="text/javascript">

//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
window.onload=function(){
populatedropdown("monthdropdown1","daydropdown1", "yeardropdown1")
}
</script>
		</div>	
	<span>to</span>
		<div id="calendar2">
			
			<select id="monthdropdown2">
				</select> 
				<select id="daydropdown2">
				</select> <select id="yeardropdown2">
				</select>
		

			<script type="text/javascript">

//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
window.onload=function(){
populatedropdown("monthdropdown2","daydropdown2",  "yeardropdown2")
}
</script>
		</div>
		</form>

Only the second calendar is taking effect. All the dropdowns in calendar1 is empty. Please help me.

[007Julien]

This onload function would be better !

window.onload=function(){
   populatedropdown("monthdropdown1","daydropdown1","yeardropdown1");
   populatedropdown("monthdropdown2","daydropdown2","yeardropdown2");
}

[Ameena]

Thanks.. its working fine.If u dont mind can u plz tell me why the other code was not working.

[007Julien]

You can attach only one function with this method, the second one overrides the first.

See, for example this page for a non destructive cross browser method ...