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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    help on disabling checkboxes

    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>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,734
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    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.
    Last edited by Philip M; 10-05-2011 at 08:13 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    103
    Thanks
    0
    Thanked 14 Times in 14 Posts
    Do you want to achive this using only javascript i.e. client side only or will be comfortable if done at server side

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,734
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by jassi.singh View Post
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Code:
    <form method="post" action="process.php"></form>
    First get rid of that closing tag and add ID as shown below.

    Code:
    <form id='theForm' method="post" action="process.php">
    Code:
    <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>

  • Users who have thanked Logic Ali for this post:

    Philip M (10-05-2011)

  • #6
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Actually from the title it looks as though you may have preferred to disable ineligible checkboxes, in which case you can change to this:
    Code:
    <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>


  •  

    Posting Permissions

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