Radio button array problem

Background:
I have a simple online availability calendar where there is a table of days, and the background to each cell is coloured depending on whether the day is booked, available, or unavailable. (data coming from a MySQL database).

For my client to manage the bookings I have a page where under each date there is a radio button with the tree options, booked, unbooked, available, and the default status of each button is determined by the current status of the days booking.

For ease of processing the submission of the form the radio button groups are named as follows:

<form action="./calendar-update.php" method="post" name="formcal" onReset="CalReset();">

<td id="n1" class="munavailable">1
<input name="day[1]" type="radio" value="A" >
<input name="day[1]" type="radio" value="B">
<input name="day[1]" type="radio" value="U" checked> </td>

<td id="n2" class="booked">2
<input name="day[2]" type="radio" value="A">
<input name="day[2]" type="radio" value="B" checked>
<input name="day[2]" type="radio" value="U">
</td>

etc, all the way to
<td id="n31" class="mbooked">31
<input name="day[31]" type="radio" value="A">
<input name="day[31]" type="radio" value="B" checked>
<input name="day[31]" type="radio" value="U">
</td>
each of these radio groups is in a table cell with the colour being determined by the initial state of the booking, and there is some additional javascript, not shown above, which changes each cell colour when the radio button is changed.

Problem:

When the reset button is clicked, I want the cell colours to revert to the initial state. I have a javascript function called CalReset() which I hoped would do the job, but its not working!

function CalReset() {
for (i=1; i<=document.formcal.elements.length; i++) {
if (document.formcal.day[i]['0'].defaultChecked==true) {
document.getElementById("n"+i).className='mavailable';
}
if (document.formcal.day[i]['1'].defaultChecked==true) {
document.getElementById("n"+i).className='mbooked';
}
if (document.formcal.day[i]['2'].defaultChecked==true) {
document.getElementById("n"+i).className='munavailable';
}
}
}


I know the problem is in the condition line if (document.formcal.day[i]['2'].defaultChecked==true). I just cant seem to be able to check each radio group to determine its default state.

Any help would be appreciated.

I know the problem is in the condition line if (document.formcal.day[i]['2'].defaultChecked==true). I just cant seem to be able to check each radio group to determine its default state.

You already have the answer :)...You can't you have to loop through each of the radio buttons and find out which radio button has defaultChecked==true

You already have the answer :)...You can't you have to loop through each of the radio buttons and find out which radio button has defaultChecked==true

I thought that's effectively what I was doing.:confused: Admittedly I'm not looping through each of the radio buttons in each group, rather I am trying to loop through each group, and then test each of the three buttons in each group individually. But it seems to be my attempt at referencing of the radiogroup which is causing the problem.

document.formcal.day[i]['0']
means u r trying to access the ith day element but instead u want to access the element with name day[n]

function CalReset() {
for (i=1; i <= 31; i++) {
var d = document.formcal['day[' + i + ']'];
if (d[0].defaultChecked==true) {
document.getElementById("n"+i).className='mavailable';
} else if (d[1].defaultChecked==true) {
document.getElementById("n"+i).className='mbooked';
} else if (d[2].defaultChecked==true) {
document.getElementById("n"+i).className='munavailable';
}
} // i
}

Shyam.

Thanks very much. Works a treat :thumbsup: