Jump to content
Stef's Coding Community
Sign in to follow this  
BuildMyWeb

Visibility and InnerHTML issue

Recommended Posts

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 by BuildMyWeb

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...