getElementbyID not working in IE 7, but working in Mozilla, crome

[gulluman1]

Hi I have this javascript with getElementbyId which is not working in IE 7. I have been pulling my hair out almost trying different things. I am trying to control disable/enable checkbox when radio is selected 'Yes'. Any help would be appreciated. Thank you.

<script type="text/javascript"> 
 
  function makeChoice(obj)
  {
	
	var Name = obj.name;
	var Id = obj.id;
 
	// doing B
	var B_Name = Name+'_B_';
	if(document.getElementById(Id).value != 1){
		
    for(var x=1; x<10; x++){
    	document.getElementById(B_Name+x).disabled = true;
			}
			}
	else
	   {
		for(var x=1; x<10; x++){
			document.getElementById(B_Name+x).disabled = false;
        }
        }
 
	// doing C
	var C_Name = Name+'_C_';
	if(document.getElementById(Id).value != 1)
		for(var x=1; x<14; x++)
			document.getElementById(C_Name+x).disabled = true;
	else
		for(var x=1; x<14; x++)
			document.getElementById(C_Name+x).disabled = false;
	
  }
  </script>
<form id='page3' name='page3' method='post' action=test.php'>
<table width='100%'>
<tr>
<td align='center' height='50px'> 
                     <input id='question_18_1' name='question_18' type='radio' onclick='makeChoice(this);' value='1'   /></td>
<td align='center' height='50px'> 
                     <input id='question_18_2' name='question_18' type='radio' onclick='makeChoice(this);' value='2'   /></td>
</tr>      
      </table> 

<table>  
<tr>
<td height ='50px' align='center'>
           <input id='question_18_B_1' name='question_18_B_1' type='checkbox' value='1' disabled="disabled"  /></td> 
<td height ='50px' align='center'>
           <input id='question_18_B_2' name='question_18_B_2' type='checkbox' value='1' disabled="disabled"  /></td>
</tr> 
<tr> 
<td height ='70px' align='center'><input type='hidden' name='question_18_C_1' value='0'> 
           <input id='question_18_C_1' name='question_18_C_1' type='checkbox' value='1' disabled="disabled"   /></td> 
<td height ='70px' align='center'><input type='hidden' name='question_18_C_2' value='0'> 
           <input id='question_18_C_2' name='question_18_C_2' type='checkbox' value='1' disabled="disabled"   /></td>
</tr> 
           </table>
<input id='submitpage3' type='submit' name='submit' value='Page suivante' />

[jscheuer1]

I copied your code to a test page and ran it in both browsers. I see no difference in its behavior or the script errors reported in either browser.

There is one thing (assuming the errors are first corrected) that would be different. Apparently IE sees name and id as the same thing in some cases as relates to this setup, so consider this version (script errors dealt with, markup slightly changed, overall though by no means ideal):

<script type="text/javascript"> 
 
  function makeChoice(obj)
  {
	
	var Name = obj.name;
	var Id = obj.id;
	//alert(Id);
 
	// doing B
	var B_Name = Name+'_B_';
	if(document.getElementById(Id).value != 1){
		
    for(var x=1; x<10; x++){
	if(document.getElementById(B_Name+x)){
    		document.getElementById(B_Name+x).disabled = true;
	}
    }
	}
	else
	   {
		for(var x=1; x<10; x++){
			if(document.getElementById(B_Name+x)){
				document.getElementById(B_Name+x).disabled = false;
			}
       		}
        }
 
	// doing C
	var C_Name = Name+'_C_';
	if(document.getElementById(Id).value != 1){
		for(var x=1; x<14; x++)
			if(document.getElementById(C_Name+x)){
				document.getElementById(C_Name+x).disabled = true;
			}
	}else{
		for(var x=1; x<14; x++)
			if(document.getElementById(C_Name+x)){
				document.getElementById(C_Name+x).disabled = false;
			}
	}
	
  }
  </script>
<form id='page3' name='page3' method='post' action=test.php'>
<table width='100%'>
<tr>
<td align='center' height='50px'> 
                     <input id='question_18_1' name='question_18' type='radio' onclick='makeChoice(this);' value='1'   /></td>
<td align='center' height='50px'> 
                     <input id='question_18_2' name='question_18' type='radio' onclick='makeChoice(this);' value='2'   /></td>
</tr>      
      </table> 

<table>  
<tr>
<td height ='50px' align='center'>
           <input id='question_18_B_1' name='question_18_B_1' type='checkbox' value='1' disabled="disabled"  /></td> 
<td height ='50px' align='center'>
           <input id='question_18_B_2' name='question_18_B_2' type='checkbox' value='1' disabled="disabled"  /></td>
</tr> 
<tr> 
<td height ='70px' align='center'><input type='hidden' name='f' value='0'> 
           <input id='question_18_C_1' name='question_18_C_1' type='checkbox' value='1' disabled="disabled"   /></td> 
<td height ='70px' align='center'><input type='hidden' name='f' value='0'> 
           <input id='question_18_C_2' name='question_18_C_2' type='checkbox' value='1' disabled="disabled"   /></td>
</tr> 
           </table>
<input id='submitpage3' type='submit' name='submit' value='Page suivante' />

[gulluman1]

Thank you so much John.
I think i figured out why it didnt work. But that raises another problem.

Look at the code below. If i remove

     <input type='hidden' name='question_18_B_1' value='0'>

the function works. I initially removed it in the beginning of the post to make the code simpler without realizing that that was causing the problem.

Let me elaborate on this. I constructed a multipage survey and checkboxes are real problem when you are going back forth between pages. E.g. If you select a checkbox in page 1 and submit the form to go to page 2, the value of checkbox is saved in a session variable. In the second page there is a Go Back to Page 1 button(not a submit button). So if the user goes back to Page 1 and decides that the checkboxes should be deselected and deselct them and Submits the page 1, the session variable is unset. BUT, when you Go back to page 1 again, the checkbox remain selected. The hidden value similar to the Checkbox name solved the problem totally, but now is a major problem for IE 7. I created a sample and attached to give u a live example. There are two pages. They are php files. test.php and test2.php.

I really appreciate your knowledge and help. I hope anyone else who is creating multipage survey will benefit from this.

I have created 15 page survey so any dramatic change will cost a lot of energy as well which is unwanted at this point.

<tr>
<td height ='50px' align='center'>
     <input type='hidden' name='question_18_B_1' value='0'>
     <input id='question_18_B_1' name='question_18_B_1' type='checkbox' value='1'  checked='checked' />
</td>
<td height ='50px' align='center'>
    <input type='hidden' name='question_18_B_2' value='0'>
    <input id='question_18_B_2' name='question_18_B_2' type='checkbox' value='1'  checked='checked' />
</td>
</tr> 

I thank you in advance if there is any way you can help me. Tehre two php files in it. its all ready. I removed the hidden input in the question_18_B_1 to clarify.

Sayem

[gulluman1]

if you are wondering...am a newbie in JavaScript...better at php...still on the learning curve....

[jscheuer1]

Well, obviously some sort of wholesale change is required. These sorts of changes are often fairly easy if you have an editor that will make the same change to multiple files. I use Edit Pad Pro, but wouldn't recommend it because it has other issues. I just use it because I'm used to it and know how to deal with its shortcomings. If your current editor isn't cabable of this sort of wholesale change, I would recommend (for windows) NotePad++ available here:

http://notepad-plus.sourceforge.net/uk/site.htm

For other operating systems (and even for Windows if you like), vim:

http://www.vim.org/

In either case, having an editor capable of wholesale changes is of little help unless you know what to change. I would suggest, since the names appear to be the driving force behind the functionality you want, keeping the names the same. The id's though are another matter. There is no reason (as far as I can tell) why they have to be the same as the names.

[gulluman1]

Thank you very much John for your suggestion. I use PSPad and am trying Notepad plus now. The wholesale changes can still be made but the problem is I dont know what changes to make for the problem above yet. IE 7's naming rule is really making it difficult.
Is there any other way the checkboxes can work even if changing the way the checkboxes are being enabled/disabled? I am using Session variables which is then server side. Can this be combined with javascript so that the checkboxes work? Thank you.

[jscheuer1]

My thinking is, as I said. Since the functionality as regards the hidden fields appears to rely upon the names being as is, it is the id's that should be changed. They should be different than the names. This will require wholesale changes in the markup. Like the id for:

<input id='question_18_B_1'

could become, say:

<input id='ask_18_B_1'

So for that you could do a global change of all the files, changing:

id='question

to:

id='ask

In the script I think you are OK because you address the id thus:

var Id = obj.id;

so it will pick up and use the new id's automatically. However, where you have:

	// doing B
	var B_Name = Name+'_B_';
	if(document.getElementById(Id).value != 1){

and similar, it will now have to be:

	// doing B
	var B_Name = Id.replace(/_\d$/, '')+'_B_';
	if(document.getElementById(Id).value != 1){

It should then all work out. I'll test this theory, as I may be missing something else that needs to be changed.

For example:

<script type="text/javascript"> 
 
  function makeChoice(obj)
  {
	
	var Name = obj.name;
	var Id = obj.id;
	//alert(Id);
 
	// doing B
	var B_Name = Id.replace(/_\d$/, '')+'_B_';
	if(document.getElementById(Id).value != 1){
		
    for(var x=1; x<10; x++){
	if(document.getElementById(B_Name+x)){
    		document.getElementById(B_Name+x).disabled = true;
	}
    }
	}
	else
	   {
		for(var x=1; x<10; x++){
			if(document.getElementById(B_Name+x)){
				document.getElementById(B_Name+x).disabled = false;
			}
       		}
        }
 
	// doing C
	var C_Name = Id.replace(/_\d$/, '')+'_C_';
	if(document.getElementById(Id).value != 1){
		for(var x=1; x<14; x++)
			if(document.getElementById(C_Name+x)){
				document.getElementById(C_Name+x).disabled = true;
			}
	}else{
		for(var x=1; x<14; x++)
			if(document.getElementById(C_Name+x)){
				document.getElementById(C_Name+x).disabled = false;
			}
	}
	
  }
  </script>
<form id='page3' name='page3' method='post' action=test.php'>
<table width='100%'>
<tr>
<td align='center' height='50px'> 
                     <input id='ask_18_1' name='question_18' type='radio' onclick='makeChoice(this);' value='1'   /></td>
<td align='center' height='50px'> 
                     <input id='ask_18_2' name='question_18' type='radio' onclick='makeChoice(this);' value='2'   /></td>
</tr>      
      </table> 

<table>  
<tr>
<td height ='50px' align='center'>
           <input id='ask_18_B_1' name='question_18_B_1' type='checkbox' value='1' disabled="disabled"  /></td> 
<td height ='50px' align='center'>
           <input id='ask_18_B_2' name='question_18_B_2' type='checkbox' value='1' disabled="disabled"  /></td>
</tr> 
<tr> 
<td height ='70px' align='center'><input type='hidden' name='question_18_C_1' value='0'> 
           <input id='ask_18_C_1' name='question_18_C_1' type='checkbox' value='1' disabled="disabled"   /></td> 
<td height ='70px' align='center'><input type='hidden' name='question_18_C_2' value='0'> 
           <input id='ask_18_C_2' name='question_18_C_2' type='checkbox' value='1' disabled="disabled"   /></td>
</tr> 
           </table>
<input id='submitpage3' type='submit' name='submit' value='Page suivante' />

[gulluman1]

Thank you John. You are awesome.

I am trying them and will update. Thanks a lot.

[gulluman1]

Hi John,

I tried your theory and it works like a charm. Wow!
Actually it didnt take much time for the wholesale change,
most of the checkboxes code are in for loop...so i had to change only once or twice in each file....
But i really appreciate your generous help here.

Thank you.