Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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!

    Code:
    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.

  • #2
    Senior Coder shyam's Avatar
    Join Date
    Jul 2005
    Posts
    1,563
    Thanks
    2
    Thanked 163 Times in 160 Posts
    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

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by shyam View Post
    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. 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.

  • #4
    Senior Coder shyam's Avatar
    Join Date
    Jul 2005
    Posts
    1,563
    Thanks
    2
    Thanked 163 Times in 160 Posts
    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]

    Code:
    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
    }

  • #5
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Shyam.

    Thanks very much. Works a treat


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •