Web Analytics Made Easy -
StatCounter At a loss with some IE 6 issues - CodingForum

Announcement

Collapse
No announcement yet.

At a loss with some IE 6 issues

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • At a loss with some IE 6 issues

    OK, here is some messy not beautiful I'm sure javascript I've been working on today:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    	<title>OSA Form Stuff</title>
    	<script type="text/javascript">
    	// Show something
    	function show(name)
    	{
    		var show_div = document.getElementById(name);
    		show_div.setAttribute("style", "");
    	}
    
    	// Hide something
    	function hide(name)
    	{
    		var hide_div = document.getElementById(name);
    		hide_div.setAttribute("style", "display: none;");
    	}
    
    	// Show or hide something as a toggle
    	function show_hide_toggle(name)
    	{
    		var element = document.getElementById(name);
    		var current_state = element.getAttribute("style");
    
    		if(current_state == "")
    		{
    			element.setAttribute("style", "display: none;");
    		}
    		else
    		{
    			element.setAttribute("style", "");
    		}
    	}
    
    	// Add or remove checkbox value to the target
    	function checkbox_handler(target_name, checkbox_name)
    	{
    		// Get current value of the target
    		var element = document.getElementById(target_name);
    		var element_value = element.value;
    
    		// Get current value of the checkbox
    		var checkbox = document.getElementById(checkbox_name);
    		var checkbox_value = checkbox.value;
    
    		var new_value = '';
    		var exists = false;
    
    		if(element_value != '')
    		{
    			// Split target value into an array
    			var element_value_array = new Array();
    			element_value_array = element_value.split('\n');
    			var value_numbers = (element_value_array.length - 1);
    
    			for (var count = 0 ; count < value_numbers; count++)
    			{
    				working_value = element_value_array[count];
    
    				if(checkbox_value != working_value)
    				{
    					new_value = new_value + working_value + '\n';
    				}
    				else
    				{
    					exists = true;
    				}
    			}
    		}
    
    		if(exists == false && checkbox_value != '')
    		{
    			new_value = new_value + checkbox_value + '\n';
    		}
    
    		document.getElementById(target_name).value = new_value;
    	}
    
    	function other_field_handler(target_name, checkbox_name, final_target)
    	{
    		var original = document.getElementById(checkbox_name);
    		document.getElementById(target_name).value = original.value;
    		checkbox_handler(final_target, target_name);
    		original.setAttribute('readonly', 'readonly');
    	}
    
    	function clear_other_field(name, checkbox_name)
    	{
    		var other_field = document.getElementById(name);
    		other_field.value = ''
    		other_field.removeAttribute('readonly');
    		document.getElementById(checkbox_name).value = '';
    	}
    
    	window.onload = function() { 
    		drop_down();
    	}
    	</script>
    </head>
    <body>
    	<p>
    		<strong><span style="color: red;">*</span> 7. Have you ever sought out academic advising?</strong><br />
    		<input type="radio" name="academic_advising" value="Yes" onclick="show('show_academic_advising');" />&nbsp;Yes&nbsp;
    		<input type="radio" name="academic_advising" value="No" onclick="hide('show_academic_advising');" />&nbsp;No
    	</p>
    	<p id="show_academic_advising" style="display: none;">
    		<strong>7a. If yes, from whom? (check all that apply).</strong><br />
    		<input type="checkbox" name="aa_option_1" value="Academic Advisor" id="aa_option_1" onclick="checkbox_handler('academic_advising_who', 'aa_option_1');" />&nbsp;Academic Advisor<br />
    		<input type="checkbox" name="aa_option_2" value="Graduate Student" id="aa_option_2" onclick="checkbox_handler('academic_advising_who', 'aa_option_2');" />&nbsp;Graduate Student<br />
    		<input type="checkbox" name="aa_option_3" value="Faculty" id="aa_option_3" onclick="checkbox_handler('academic_advising_who', 'aa_option_3');" />&nbsp;Faculty<br />
    		<input type="checkbox" name="aa_option_4" value="Peer Monitor" id="aa_option_4" onclick="checkbox_handler('academic_advising_who', 'aa_option_4');" />&nbsp;Peer Monitor<br />
    		<input type="checkbox" name="aa_option_5" value="" id="aa_option_5" onclick="show_hide_toggle('aa_other'); checkbox_handler('academic_advising_who', 'aa_option_5'); clear_other_field('aa_other', 'aa_option_5')" />&nbsp;Other
    		<input type="text" name="aa_other" value="" id="aa_other" style="display: none;" size="23" onchange="other_field_handler('aa_option_5', 'aa_other', 'academic_advising_who');" />
    		<br /><br /><br /><textarea name="academic_advising_who" rows="8" cols="40" id="academic_advising_who"></textarea>
    	</p>
    </body>
    </html>
    Thats a working page.

    Anyway the whole things works beautifully in Firefox and Safari but I've been unable to get portions to work in IE 6 and I can't for the life of me figure out why.

    First the Yes or No buttons should be showing or hiding a question underneath.

    That part won't do anything in IE. At first I thought maybe IE wasn't passing the id in the onclick event to the function. But I used some alert(); functions to check that and it was. But for some reason IE wouldn't do the style change.

    The other piece can be seen by removing the style="display: none;" bit and then clicking on some of the checkboxes. Unchecking a checkbox should remove it from the textarea below. Again no issue in Firefox and Safari. However IE doesn't remove it it just adds another one.

    I spent a half hour putting alert(); functions all over to see what was going on but I can't figure out what is wrong. I do a comparison between the value of the checkbox against the value of each line in the textarea to see if it already exists in the textarea. From what I can tell the values are identical in IE just the same as Firefox but when they get compared by IE it obviously comes to conclusion that they aren't.

    Any nudges in the right direction or outright help to this admitted javascript newbie would be greatly appreciated.

    Jamie

  • #2
    Try this
    Code:
    	// Show something
    	function show(name)
    	{
    		var show_div = document.getElementById(name);
    		show_div.style.display = 'block';
    	}
    
    	// Hide something
    	function hide(name)
    	{
    		var hide_div = document.getElementById(name);
    		hide_div.style.display = 'none';
    	}
    
    	// Show or hide something as a toggle
    	function show_hide_toggle(name)
    	{
    		var element = document.getElementById(name);
    		var current_state = element.style.display;
    
    		if(current_state == "block")
    		{
    			element.style.display = 'none';
    		}
    		else
    		{
    			element.style.display = 'block';
    		}
    	}
    
    	// Add or remove checkbox value to the target
    	function checkbox_handler(target_name, checkbox_name)
    	{
    		// Get current value of the target
    		var element = document.getElementById(target_name);
    		var element_value = element.value;
    
    		// Get current value of the checkbox
    		var checkbox = document.getElementById(checkbox_name);
    		var checkbox_value = checkbox.value;
    
    		var new_value = '';
    		var exists = false;
    
    		if(element_value != '')
    		{
    			// Split target value into an array
    			var element_value_array = new Array();
    			element_value_array = element_value.split('\r\n');
    			var value_numbers = (element_value_array.length - 1);
    
    			for (var count = 0 ; count < value_numbers; count++)
    			{
    				working_value = element_value_array[count];
    
    				if(checkbox_value != working_value)
    				{
    					new_value = new_value + working_value + '\n';
    				}
    				else
    				{
    					exists = true;
    				}
    			}
    		}
    
    		if(exists == false && checkbox_value != '' && checkbox.checked == 1)
    		{
    			new_value = new_value + checkbox_value + '\n';
    		}
    
    		document.getElementById(target_name).value = new_value;
    	}
    
    	function other_field_handler(target_name, checkbox_name, final_target)
    	{
    		var original = document.getElementById(checkbox_name);
    		document.getElementById(target_name).value = original.value;
    		checkbox_handler(final_target, target_name);
    		original.setAttribute('readonly', 'readonly');
    	}
    
    	function clear_other_field(name, checkbox_name)
    	{
    		var other_field = document.getElementById(name);
    		other_field.value = ''
    		other_field.removeAttribute('readonly');
    		document.getElementById(checkbox_name).value = '';
    	}
    IE doesn't allow setAttribute to set some items. style is one of them.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

    Comment


    • #3
      Ahh...

      Wonderful. Thanks that fixed that part. The other part is still a problem but thats one down one to go.

      Jamie

      Comment


      • #4
        Which part? The part where the values get removed if the check boxes are unchecked?
        ||||If you are getting paid to do a job, don't ask for help on it!||||

        Comment


        • #5
          I'm stupid I didn't see your other changes to the code.

          Is this really all you added to fix that?

          && checkbox.checked == 1

          I have one final question. I'm also setting the readonly attribute in the other_field_handler function. And again IE seems to be skipping over that part. Is that something IE doesn't allow using setAttribute as well? And if so would you happen to know the alternative to that?

          I really appreciate your help. I'm glad I made the post. Otherwise I would have likely suffered awhile longer.

          Jamie

          Comment


          • #6
            Yeah thats something it doesn't allow as well. I did the if checked thing and I changed your split() to \r\n since its what windows uses. Instead of setAttribute readonly try
            Code:
            element.readonly = 'readonly'
            ||||If you are getting paid to do a job, don't ask for help on it!||||

            Comment


            • #7
              Interesting.

              Well this did not work:

              Code:
              element.readonly = 'readonly'
              But this did:

              Code:
              element.setAttribute('readOnly', true);
              Apparently IE treats the readonly attribute as case sensitive even in XHTML which is invalid of course but it works.

              I'll file that \r bit away for future reference. I'm a unix/mac guy so I probably would have run around that issue for days.

              Anyway, again, I greatly appreciate the help. You made my day.

              Jamie

              Comment

              Working...
              X