Visibility and InnerHTML issue

BuildMyWeb · June 1, 2012

i have the following script on a site im working on.

what it does:

The Subcategory field is invisible by CSS default. once a Category is chosen (onchange event), the Subcategory field is visible and the appropriate <option>'s are written.

the problem:

works fine in FF for me. IE9 the subcategory field is visible but the options are not there. its a blank drop-down.

i looked at all of my privacy and security settings but cant find a fix there. anyone have a clue? am i explaining things well enough?

// loads all functions into browser once window/page loads
window.onload = init_all;

function init_all()
{
if( !document.getElementById )
	return;

var obj_cat 		= document.getElementById("job_category");
var obj_subcat 		= document.getElementById("job_subcat");
var obj_subcat_txt 	= document.getElementById("subcat_txt");
var obj_subcat_input= document.getElementById("subcat_input");

obj_cat.onchange = check_value;

function check_value()
{
	var cat_value = obj_cat.value;

	if( cat_value != "" )
	{
		obj_subcat_txt.style.visibility		= "visible";
		obj_subcat_input.style.visibility	= "visible";
	}

	obj_subcat.innerHTML = "<option value=''></option>";

	switch( cat_value )
	{
		case"dermats": 	
			obj_subcat.innerHTML += "<option value='general'>General</option><option value='mohs'>Mohs and Procedural</option><option value='peds'>Pediatric</option><option value='derm_patho'>Dermatopathologist</option>";	
		break;

		case"techs": 	
			obj_subcat.innerHTML += "<option value='mohs_tech'>Mohs Tech</option><option value='lab_tech'>Lab Tech</option><option value='laser_tech'>Laser Operator</option><option value='other_tech'>Other Tech</option>";	
		break;

		case"mlp": 	
			obj_subcat.innerHTML += "<option value='derm_pa'>Derm. Physician's Assistant</option><option value='derm_nurse'>Derm. Nurse Practitioner</option>";	
		break;

		case"support": 	
			obj_subcat.innerHTML += "<option value='support_ma'>Medical Assistant</option><option value='support_rn'>Registered Nurse</option><option value='support_coord'>Patient Coordinator</option>";	
		break;

		case"office": 	
			obj_subcat.innerHTML += "<option value='off_recep'>Receptionist</option><option value='off_billing'>Billing and Coding</option><option value='off_mgr'>Office Manager</option>";	
		break;

		case"esthetics": 	
			obj_subcat.innerHTML += "<option value='esth_esth'>Esthetician</option>";	
		break;

		default: obj_subcat_txt.style.visibility = "hidden"; obj_subcat_input.style.visibility	= "hidden"; break;
	} // close switch( cat_value )
} // close function check_value()
}

HTML:

<!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">

<head>
...

<link rel="stylesheet" type="text/css" href="bmw_dj.css" />

   <script type='text/javascript' src='scripts/post_jobs.js'></script></head>


<body id="page_post_jobs">
<div id="wrapper">
<div id="banner">

   <a href='index.php'>Home</a>
       		<a href='profile.php'>Profile</a>
           <a href='messages.php'>Messages</a>

</div> <!-- close banner -->

<div id="sub_banner">
<span style='margin-left:30px;'>Welcome, <a href='profile.php' style='margin-left:0px;'>User</a></span><a href='logout.php'>Logout</a></div> <!-- close sub_banner -->
<div id="main">
<div id="col_left">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
</div> <!-- close col_left -->    
   <div id="col_mid_home">
   	<h1>POST A JOB</h1>

       <form action="scripts/handler_jobs.php" method="post" id="form_post_job">
       	<p class='msg_field'>
       	            </p>

           <div class='post_job_txt'><b>* Job Titles:</b> </div>			<div class='post_job_input'><input type='text' maxlength='15' name='job_title' value="" /></div>
           <div class='post_job_txt'><b>Company:</b> </div>				<div class='post_job_input'><input type='text' name='company' value="" /></div>
           <div class='post_job_txt'><b>* Salary Range:</b> </div>		<div class='post_job_input'>
                                                                           <select name='salary'>
                                                                               <option value=''></option><option value='30000'>$30,000+</option><option value='50000'>$50,000+</option><option value='70000'>$70,000+</option><option value='90000'>$90,000+</option><option value='110000'>$110,000+</option>                                                                            </select>
           															</div>

           <div class="new_line"></div>

           <div class='post_job_txt'><b>* Job Type:</b> </div>			<div class='post_job_input'>
                                                                           <select name='job_type'>
                                                                               <option value=''></option><option value='full'>Full-time</option><option value='part'>Part-time</option><option value='contract'>Contract</option><option value='temp'>Temporary</option>                                                                            </select>
           															</div>

           <div class="new_line"></div>

<!-- ################### START OF PROBLEM AREA ######################## -->                                                          
           <div class='post_job_txt'><b>* Job Category:</b> </div>		<div class='post_job_input'>
                                                                           <select name='category' id="job_category">
                                                                               <option value=''></option><option value='dermats'>Dermatologists</option><option value='techs'>Technicians</option><option value='mlp'>Mid-Level Providers</option><option value='support'>Clinical Support</option><option value='office'>Office Staff</option><option value='esthetics'>Esthetics</option><option value='other'>Other</option>                                                                            </select>
           															</div>

           <div class="new_line"></div>

           <div class='post_job_txt' id="subcat_txt"><b>* Subcategory:</b> </div>		<div class='post_job_input' id="subcat_input">
                                                                                           <select name='subcat' id="job_subcat">  
                                                                                           </select>
                                                                                       </div>
<!-- ################### END OF PROBLEM AREA ######################## -->                

           <div class='post_job_txt'><b>City:</b> </div>					<div class='post_job_input'><input type='text' name='city' value="" /></div>
           <div class='post_job_txt'><b>State:</b> </div>				<div class='post_job_input'>
           																<select name='state'>
                                                                           	<option value=""></option>
                                                                               <option value='AL'>Alabama</option><option value='AK'>Alaska</option>...</option>                                                                            </select>
           															</div>
           <div class='post_job_txt'><b>* Zip:</b> </div>				<div class='post_job_input'><input type='text' name='zip' maxlength="5" value="" /></div>

           <div class='vert_spacer' style='float:left; height:50px; width:800px;'></div>            
           <!-- SUBMIT -->
           <div style="clear:both;"><input type='submit' name='submit_button' value='Post Job' /></div>
       </form>
   </div> <!-- close col_mid_home -->

   <div id="col_right_home">
   <h2>SPONSORED LINKS</h2>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
</div> <!-- close col_right_home -->    
</div> <!-- close main -->


<div id="footer">
...
</div> <!-- close footer -->

</div> <!-- close wrapper -->
</body>
</html>

Edited June 1, 2012 by BuildMyWeb

falkencreative · June 6, 2012

You may want to check out http://stackoverflow.com/questions/6668054/innerhtml-not-working-in-ie-9-but-working-fine-in-firefox which seems to be a pretty similar problem. It looks like different browsers are interpreting your code a little differently, so your code needs to be tweaked to be properly cross browser compatible.

Sign In

Visibility and InnerHTML issue

Recommended Posts

BuildMyWeb

falkencreative

Join the conversation

Browse

Activity

Store

Support