#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2005
    Posts
    390
    Rep Power
    11

    Help me...having onChange() issues with IE8


    Hi,

    I have a few checkboxes and a textarea and it's a very simple concept and I can't get the javascript working properly and I'm desperate. I have the following so far and I think I have just lost myself. Please help me.

    The objective is based on dynamically created ids (programs1, programs2, etc..). If someone clicks on either of the programs1,2,3... ids the other checkbox with the id='none' will be disabled. Also, if any checkbox is checked the submit button will display or if the checkboxes are not checked then the submit button will be disabled.

    Thanks

    Code:
    <script type="text/javascript">
    function displaySub(id){
         var boxesChecked = 0;
         var e = document.getElementById("progBtn");
         //e.style.display = 'none';
         var inputTags = document.getElementsByTagName('input');
         var checkboxCount = -2;
    
         for (var i=0, length = inputTags.length; i<length; i++) {
                 if (inputTags[i].type == 'checkbox') {
                         checkboxCount++;
                 }
         }
         for(var i = 1; i<=checkboxCount; i++){
                 if(document.getElementById("programs"+i).checked == true){
                         boxesChecked++;
                 }
         }
         if(document.getElementById("none1").checked == true){
                 boxesChecked++;
                 for(var i = 1; i<=checkboxCount; i++){
                         document.getElementById("programs"+i).checked = false;
                         document.getElementById("programs"+i).disabled="disabled";
                 }
         }else{
                 for(var i = 1; i<=checkboxCount; i++){
                         document.getElementById("programs"+i).disabled="";
                 }
         }
         if(boxesChecked > 0){
                 e.style.display='block';
         }else{
                 e.style.display='none';
         }
    }
    </script>
    Code:
    <form id="person" action="" method="post">
    				
                    <!-- checkbox group -->
                    <input id="programs1" name="programs" onchange="displaySub();" type="checkbox" value="136" checked="checked"/>
                    <input id="programs2" name="programs" onchange="displaySub();" type="checkbox" value="137" checked="checked"/>
    
                    <!-- single checkbox -->
                    <input id="none1" name="none" onchange="displaySub();" type="checkbox" value="Y"/>NONE OF THE ABOVE
                    <div id="progCom">
       				
       				<textarea id="comment" name="comment" style="width:500px" rows="5" cols="30"></textarea>
       		</div>
       				
       	        <button type="submit" id="progBtn" style="display:block;">Submit</button>
         </form>
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    Are you wanting something like this?
    Code:
    <script type="text/javascript">
    function displaySub(id){
    var all_checkboxes = document.getElementsByTagName("input");
    var checkboxes = document.getElementById(id);
    var idNum = id.split("programs")[1];
    var preceddingNum = "programs" + idNum;
     if(checkboxes.checked == true){
      for(i=0;i<all_checkboxes.length;i++){
       if(all_checkboxes[i].getAttribute("type") == "checkbox"){
        if(parseInt(idNum-1) != i){
         all_checkboxes[i].disabled = true;
         all_checkboxes[i].checked = false;
         document.getElementById("progBtn").disabled = false;
        }
       }
      }
     }
     else {
      for(i=0;i<all_checkboxes.length;i++){
       if(all_checkboxes[i].getAttribute("type") == "checkbox"){
        if(parseInt(idNum-1) != i){
         all_checkboxes[i].disabled = false;
         all_checkboxes[i].checked = false;
         document.getElementById("progBtn").disabled = true;
        }
       }
      }
     }
    }
    </script>
    
    <form id="person" action="" method="post">
    				
                    <!-- checkbox group -->
                    <input id="programs1" name="programs" onchange="displaySub(this.id);" type="checkbox" value="136"/>
                    <input id="programs2" name="programs" onchange="displaySub(this.id);" type="checkbox" value="137"/>
    
                    <!-- single checkbox -->
                    <input id="programs3" name="none" onchange="displaySub(this.id);" type="checkbox" value="Y"/>NONE OF THE ABOVE
                    <div id="progCom">
       				
       				<textarea id="comment" name="comment" style="width:500px" rows="5" cols="30"></textarea>
       		</div>
       				
       	        <button type="submit" id="progBtn" disabled="true">Submit</button>
    </form>
    I edited your code; so I could get a fresh start on giving you an example; similar to your description, of what you are wanting to achieve.

IMN logo majestic logo threadwatch logo seochat tools logo