help on disabling checkboxes

[gutibs]

irst post here, i'll try to be simple: I need to create a form where participants of a medical convention register to classes, each class lasts 3 hours, so a person who wants to attend to class starting at 10 am cannot register to 11 am, 12pm and 1pm classes, but he can register to 2pm and so on.

There are 3 different classes per hour.

i thought doing this using javascript, but i'm absolutely lost.

Can you please give me a hint on how to do this?

Thanks!!

this is the part of the form that has the checkboxes.

<form method="post" action="process.php"></form>
<input type="checkbox" value="101" name="convention1"> 10 am: Cariovascular desease<br>
<input type="checkbox" value="102" name="convention2"> 10 am: Changes on toracic surgeon<br>
<input type="checkbox" value="103" name="convention3"> 10 am: New drugs on heart<br>
<input type="checkbox" value="111" name="convention4"> 11 am: New drugs on heart (II)<br>
<input type="checkbox" value="112" name="convention5"> 11 am: Dynamic process on blood pressure<br>
<input type="checkbox" value="113" name="convention6"> 11 am: Aortic disease<br>
<input type="checkbox" value="121" name="convention7"> 12 am: Pulmonar Pressure<br>
<input type="checkbox" value="122" name="convention8"> 12 am: Open table<br>
<input type="checkbox" value="131" name="convention9"> 1 pm: Neurological aspects on heart rate<br>
<input type="checkbox" value="132" name="convention10"> 1 pm: Cardiovascular disease (II)<br>
<input type="checkbox" value="133" name="convention11"> 1 pm: Mioresponse on heart failure<br>
<input type="checkbox" value="141" name="convention12"> 2 pm<br>
<input type="checkbox" value="142" name="convention13"> 2 pm<br>
<input type="checkbox" value="143" name="convention14"> 2 pm<br>
<input type="checkbox" value="151" name="convention15"> 3 pm<br>
<input type="checkbox" value="152" name="convention16"> 3 pm<br>
<input type="checkbox" value="153" name="convention17"> 3 pm<br>
<input type="submit"></input>
</form>

[Philip M]

Use radio buttons instead, in two groups - before/after lunch. Disable any radios which are invalid selections. (If I understand you anyone who elects for a 1200 class cannot then attend any other session).

Suggest you include a one-hour lunch pause!

If for some reason you realy want checkboxes then it is possible to make them emulate radio butoons (i.e. only one per group may be selected).

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

[jassi.singh]

Do you want to achive this using only javascript i.e. client side only or will be comfortable if done at server side

[Philip M]

Originally Posted by jassi.singh

Do you want to achive this using only javascript i.e. client side only or will be comfortable if done at server side

Well, the OP posted in the Javascript forum. But yes, all Javascript validation should be repeated server-side. JavaScript form validation only provides convenience for users, not security. This means that JavaScript should be used as an "enhancement", not as a requirement. So your form should not be dependent on JavaScript alone to perform your validation. Instead, whatever server-side language you use to process the form (PERL, ASP, PHP, etc.) should also perform the same validation. Otherwise, people will be able to bypass your validation (and even possibly inject malicious code) simply by disabling Javascript.

[Logic Ali]

<form method="post" action="process.php"></form>

First get rid of that closing tag and add ID as shown below.

<form id='theForm' method="post" action="process.php">

<script type="text/javascript">

window.onload = function()
{
  var cb = [], elems = document.getElementById( 'theForm' ).elements;
   
  for( var i = 0, box; elems[ i ]; i++ )
    if( ( box = elems[ i ] ).type && box.type === 'checkbox' )
    { 
      box.onclick = f;
      box.hour = Number( box.value.substring( 0, 2 ) );
      cb.push( box );
    }
  
  function f()
  {
    if( this.checked )  
      for( var i = 0; cb[ i ]; i++ )
        if( cb[ i ] !== this && cb[ i ].checked && Math.abs( this.hour - cb[ i ].hour ) < 3 )
        {
           alert( 'Another selected convention starting at ' + cb[ i ].hour + ':00 overlaps this one.'  ); 
           this.checked = false;
        }
  }   
}

</script>

[Logic Ali]

Actually from the title it looks as though you may have preferred to disable ineligible checkboxes, in which case you can change to this:

<script type="text/javascript">

window.onload = function()
{
  var cb = [], elems = document.getElementById( 'theForm' ).elements;
   
  for( var i = 0, box; elems[ i ]; i++ )
    if( ( box = elems[ i ] ).type && box.type === 'checkbox' )
    { 
      box.onclick = f;
      box.hour = Number( box.value.substring( 0, 2 ) );
      cb.push( box );
    }
    
  function f()
  {
    for( var i = 0; cb[ i ]; i++ )
      cb[ i ].disabled = false;      
      
    for( var i = 0; cb[ i ]; i++ )
      if( cb[ i ].checked )
        for( var j = 0; cb[ j ] ; j++ )
          if( cb[ j ] !== cb[ i ] && Math.abs( cb[ i ].hour - cb[ j ].hour ) < 3 )
            cb[ j ].disabled = true;          
  }    
    
}

</script>