Results 1 to 3 of 3

Thread: [RESOLVED] Setting innerHTML not working in IE

  1. #1

    Thread Starter
    Hyperactive Member half flung pie's Avatar
    Join Date
    Jun 2005
    Location
    South Carolina, USA
    Posts
    317

    Resolved [RESOLVED] Setting innerHTML not working in IE

    I have the following code in the head section of my page.
    Code:
    <script language="JavaScript">
    		<!--
    			function assettype_clicked(){
    				//alert(document.forms['frmAdd'].elements['assettype'].value);
    				var selectedType=document.forms['frmAdd'].elements['assettype'].value;
    				var availableMakes;
    				
    				if(selectedType == 6){//switch
    					//7 Cisco, 8 HP
    					availableMakes = "<option value='1'>Unknown</option>" + 
    						"<option value='7'>Cisco</option>" +
    						"<option value='8'>HP</option>";
    				}else if(selectedType == 5){//docking station
    					//5,Lenovo
    					availableMakes = "<option value='1'>Unknown</option>" +
    						"<option value='5'>Lenovo</option>";
    				}else if(selectedType == 4){//monitor
    					//4,Lenovo
    					availableMakes = "<option value='1'>Unknown</option>" +
    						"<option value='4'>Lenovo</option>";
    				}else if(selectedType == 3){//laptop
    					//3,Lenovo 6,Dell
    					availableMakes = "<option value='1'>Unknown</option>" +
    						"<option value='3'>Lenovo</option>" +
    						"<option value='6'>Dell</option>";
    				}else if(selectedType == 2){//desktop
    					//2 Lenovo
    					availableMakes = "<option value='1'>Unknown</option>" +
    						"<option value='2'>Lenovo</option>";
    				}else{
    					//1,unk
    					availableMakes = "<option value='1'>Unknown</option>";
    				}
    				var assetmakeselect=document.getElementById("assetmake");
    				assetmakeselect.innerHTML=availableMakes;
    			}
    		//-->
    		</script>
    If using Chrome or Firefox, the code works fine. When certain types are chosen, corresponding makes are populated. (Both fields are <select>s )

    If I press F12 in IE, it appears as if the "assetmake" select is not being populated with the html tags. For example, I clicked on "Laptop Computer" and IE is reporting that "assetmake" is filled with just "UnknownLenovoDell", yet doing the same in Chrome returns
    "<option value="1">Unknown</option><option value="3">Lenovo</option><option value="6">Dell</option>"
    which is what it's supposed to be.

    Does innerHTML just not work in IE, or is there something I'm missing?

    Base 2
    Fcnncu"Nqxgu"Lguug##

  2. #2
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    Re: Setting innerHTML not working in IE

    Yes, innerHTML can be wonky in IE and usually isn't a good choice for cross-browser compatibility. Here's some script that demonstrates adding and removing options which could be adapted for your purpose.

  3. #3

    Thread Starter
    Hyperactive Member half flung pie's Avatar
    Join Date
    Jun 2005
    Location
    South Carolina, USA
    Posts
    317

    Re: Setting innerHTML not working in IE

    Thanks, I've modified my original script. Pasting in case someone from the future searches and comes across this post.

    Code:
    <script type="text/javascript">
    		<!--
    		function remove_all_children_from(EltID){
    			var cell = document.getElementById(EltID);
    			if (cell.hasChildNodes()){
    				while (cell.childNodes.length >=1){
    					cell.removeChild(cell.firstChild);
    				}
    			}
    		}
    		
    		function add_opt_to_sel(SelId,OpText,OpValue){
    			var selecthandle=document.getElementById(SelId);
    			var elOptNew = document.createElement('option');
    			elOptNew.text = OpText;
    			elOptNew.value = OpValue;
    			try {
    				selecthandle.add(elOptNew,null); //Standards Compliant (not IE)
    			}
    			catch(ex) {
    				selecthandle.add(elOptNew); //IE Only
    			}
    		}
    		
    		function assettype_clicked(){
    				var selectedType=document.forms['frmAdd'].elements['assettype'].value;
    				var assetmakeselect=document.getElementById("assetmake");
    				
    				remove_all_children_from("assetmake");
    				
    				if(selectedType == 6){//TODO: make this a switch
    					//7 Cisco, 8 HP
    					add_opt_to_sel("assetmake","Unknown",1);
    					add_opt_to_sel("assetmake","Cisco",7);
    					add_opt_to_sel("assetmake","HP",8);
    				}else if(selectedType == 5){//docking station
    					//5,Lenovo
    					add_opt_to_sel("assetmake","Unknown",1);
    					add_opt_to_sel("assetmake","Lenovo",5);
    				}else if(selectedType == 4){//monitor
    					//4,Lenovo
    					add_opt_to_sel("assetmake","Unknown",1);
    					add_opt_to_sel("assetmake","Lenovo",4);
    				}else if(selectedType == 3){//laptop
    					//3,Lenovo 6,Dell
    					add_opt_to_sel("assetmake","Unknown",1);
    					add_opt_to_sel("assetmake","Lenovo",3);
    					add_opt_to_sel("assetmake","Dell",6);
    				}else if(selectedType == 2){//desktop
    					//2 Lenovo
    					add_opt_to_sel("assetmake","Unknown",1);
    					add_opt_to_sel("assetmake","Lenovo",2);
    				}else{
    					//1,unk
    					add_opt_to_sel("assetmake","Unknown",1);
    				}
    			}
    		//-->
    		</script>

    Base 2
    Fcnncu"Nqxgu"Lguug##

Posting Permissions

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



Click Here to Expand Forum to Full Width