Here's one for you, Javascript gurus:

SeñorAmor

One of our local schools wants a web-based survey their students can take to rate their athletic coach for the 2007 year. I made a webpage that uses Javascript to dynamically populate drop-down lists so that when a student selects the sport they participated in, it will then prompt them for the school they attended, which when chosen, will populate another drop-down list with the names of coaches that pertain to that particular sport at that particular school.

I have tested this on Opera 9.21, Firefox 2.0.0.9, IE 6, and IE 7. It works perfectly in Opera and FF, but does not work in either IE variant. Using some strategically placed alert()'s, I found that IE is stripping the first tag off my generated list of <option> tags.

By that I mean this:

Say a student chooses Baseball as their sport. Say Baseball was a sport at 3 schools. My Javascript will create something like the following -

<option value="1">School 1</option>
<option value="2">School 2</option>
<option value="3">School 3</option>

then set the innerHTML of its parent <select> to the generated code.

In IE, however, it strips out the first opening tag, leaving me with

School 1</option>
<option value="2">School 2</option>
<option value="3">School 3</option>

causing it not to work as intended.

I am completely at a loss as to why this is happening. I can't see anything in my code that would strip off the beginning of any generated string, and why it would only occur in IE.

Below is my Javascript code and the relevant HTML. Hopefully someone can see something I do not. This has got me stumped.

Oh, and before anyone mentions it, the first thing I noticed was that I had separate sections with id="x" and name="x". I changed them so no id was the same as another name, but that had no effect (so I changed them back).

Javascript:

// coach_list[sport][school][coach]
/* sport =
	bb	= baseball
	bbb	= basketball - boys
	bbg	= basketball - girls
	c	= cheerleading
	cc	= cross country
	d	= dance
	f	= football
	gb	= golf - boys
	sb	= soccer - boys
	sg	= soccer - girls
	sbb	= softball - boys
	sbg	= softball - girls
	tb	= tennis - boys
	tg	= tennis - girls
	tf	= track & field
	w	= wrestling
  
  school = 
  	l	= lourdes
	n	= neumann
*/

var coach_list = new Array();
coach_list = ['bb', 'bbb', 'c', 'cc', 'd', 'f', 'gb', 'sb', 'sg', 'sbb', 'sbg', 'tb', 'tg', 'tf', 'w'];

coach_list['bb']		= ['l']
coach_list['bb']['l']	= ['Jason Herman', 'Chris Jahntz', 'Mike Sobojinski', 'Paul Anderson', 'Sam Salzsieder'];

coach_list['bbb']		= ['l', 'n'];
coach_list['bbb']['l']	= ['Dennis Ruedinger', 'John Cleaver', 'Trevor Krueger', 'Ben Huizenga', 'Dave Zimmerman', 'Nick Semenas'];
coach_list['bbb']['n']	= ['Matt Kufel', 'Ross Tomcyzk', 'David Noone', 'Tom Hellmann', 'Adam Kinderman'];

coach_list['bbg']		= ['l', 'n'];
coach_list['bbg']['l']	= ['Alison Cesnovar', 'Reed Tyriver', 'Scott Krause', 'Mike Baehman', 'Ruth Priebe'];
coach_list['bbg']['n']	= ['Pete Bartlett', 'Melissa Hunt', 'Paul Reed', 'Cheryl Calkins', 'Bill Buyarski'];

coach_list['c']			= ['l'];
coach_list['c']['l']	= ['Jennifer Zemke'];

coach_list['cc']		= ['l', 'n'];
coach_list['cc']['l']	= ['Rodney Silvis', 'LeeAnn Silvis', 'Chad Crawford'];
coach_list['cc']['n']	= ['Paul Spanbauer', 'Tim Moore'];

coach_list['d']			= ['l'];
coach_list['d']['l']	= ['Stephanie Kromm'];

coach_list['f']			= ['l', 'n'];
coach_list['f']['l']	= ['Joe Hilmer', 'Nick Behnke', 'JR Zemke', 'Eric Quinney-Burnard', 'Chris Phillips', 'Nick Semenas'];
coach_list['f']['n']	= ['Pat O\'Neill', 'Greg Leiser', 'Greg Ruhl', 'Tim Danielson'];

coach_list['gb']		= ['l'];
coach_list['gb']['l']	= ['Bob Mand'];

coach_list['sb']		= ['l'];
coach_list['sb']['l']	= ['Lew Welsh'];

coach_list['sg']		= ['l'];
coach_list['sg']['l']	= ['Lew Welsh'];

coach_list['sbb']		= ['n'];
coach_list['sbb']['n']	= ['Dave Yurk'];

coach_list['sbg']		= ['l', 'n'];
coach_list['sbg']['l']	= ['Matt Hintz', 'Karen Coats'];
coach_list['sbg']['n']	= ['Pete Bartlett', 'Melissa Hunt'];

coach_list['tb']		= ['l'];
coach_list['tb']['l']	= ['Patti Stinski'];

coach_list['tg']		= ['l'];
coach_list['tg']['l']	= ['Patti Stinski'];

coach_list['tf']		= ['l', 'n'];
coach_list['tf']['l']	= ['John Netzer', 'Chad Crawford'];
coach_list['tf']['n']	= ['Mandi Hendricks'];

coach_list['w']			= ['l', 'n'];
coach_list['w']['l']	= ['Jaime Zemke', 'JR Zemke', 'Steve Heinzl', 'Scott Zemke'];
coach_list['w']['n']	= ['Paul Spanbauer'];

function prep_fields(field, value)
{
	switch (field)
	{
		case 'sport':
			if (value != '0')
			{
				var list = '';
				var ctr = 0;
				var last = '';
				var school_list = new Array(); school_list['n'] = 'Neumann'; school_list['l'] = 'Lourdes';
				
				for (var school in coach_list[value])
				{
					alert('I am here and school = ' + school);
					if (school == 'l' || school == 'n')
					{
						alert('now i am here and school = ' + school);
						list += '<option value="' + school + '">' + school_list[school] + '</option>';
						ctr++;
						
						
						last = school;
						
						alert('list = ' + list + '\n last = ' + last);
					}
				}
				
				if (ctr > 1)
				{
					list = '<option value="0">Please choose...</option>' + list;
					
					alert('now list = ' + list);
					
					document.getElementById('school_list').innerHTML = list;				
					document.getElementById('school').style.display = 'inline';
					document.getElementById('coach').style.display = 'none';
				}
				else
				{
					alert('in else, list = ' + list);
					document.getElementById('school_list').innerHTML = list;
					document.getElementById('school').style.display = 'inline';	
					prep_fields('school', last);	
				}
				
				alert('in school_list = ' + document.getElementById('school_list').innerHTML);
				alert('in school = ' + document.getElementById('school').innerHTML);
			}
			else
			{
				document.getElementById('school').style.display = 'none';
				document.getElementById('coach').style.display = 'none';
			}
			
			break;
		
		case 'school':
			if (value != '0')
			{
				var list = '';
				var ctr = 0;
				var sport = document.getElementById('sport').value;
				
				for (var coach in coach_list[sport][value])
				{
					if (coach)
					{
						list += '<option value="' + coach_list[sport][value][coach] + '">' + coach_list[sport][value][coach] + '</option>';
						ctr++;
					}
				}
				
				if (ctr > 1)
				{
					list = '<option value="0">Please choose...</option>' + list;
					document.getElementById('coach_list').innerHTML = list;				
					document.getElementById('coach').style.display = 'inline';	
				}
				else
				{
					document.getElementById('coach_list').innerHTML = list;
					document.getElementById('coach').style.display = 'inline';
				}
			}
			else
			{
				document.getElementById('coach').style.display = 'none';
			}
			break;
	}
}

function check_student(val)
{
	var ele = document.getElementById('q8');
	
	if (val == 's')
	{
		ele.style.display = 'block';
	}
	else
	{
		ele.style.display = 'none';	
	}
}

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>2007 UCS Athletic Coach Evaluation</title>
<link rel="stylesheet" href="css/general.css" />
<script language="javascript" type="text/javascript" src="script.js"></script>
</head>

<body onload="check_student(document.getElementById('am').value);">
<div id="main">
	<div style="float: left"><img src="images/ucs_logo.gif" width="63" height="63" alt="" /></div>
	<div style="text-align: center; padding-top: 10px;">
		<strong style="font-size: 18px"><em>UNIFIED CATHOLIC SCHOOLS OF OSHKOSH</em></strong><br />
		<strong style="font-size: 12px"><em>Evaluation of Athletic Coach - 2007</em></strong>
	</div>
	<div style="clear: both;"></div>
	
	<div class="instructions">
		Our mission is to provide a safe, nuturing, respectful, Christian environment that maximizes the
		ability of each child to learn.  We strive for excellence in everything we do to include our
		athletic programs.
		
		<p>We need your feedback to help our coaches achieve excellence.  Thank you for taking the time to
		complete this survey.</p>
	</div>
	
	<?php if (!$complete) { ?>
	<br /><br />
	<div class="error">Please answer all of the following questions.</div>
	<?php } ?>	
	
	<br /><br />
	
	<form method="post" action="index.php">
	<div class="title">For the 2006-2007 year:</div>
	
	<div class="qwhite">
		I am a:		
		<select name="am" id="am" onchange="check_student(this.value);">
		<option value="0">Please Choose</option>
		<option value="s" <?= ($_POST['am'] == 's') ? 'selected' : '' ?>>Student</option>
		<option value="p" <?= ($_POST['am'] == 'p') ? 'selected' : '' ?>>Parent</option>
		<option value="e" <?= ($_POST['am'] == 'e') ? 'selected' : '' ?>>UCS employee</option>
		<option value="o" <?= ($_POST['am'] == 'o') ? 'selected' : '' ?>>Other</option>
		</select>
	</div>
	
	<div class="qgrey">
		Sport:
		<select name="sport" id="sport" onchange="prep_fields('sport', this.value)">
		<option value="0">Please choose:</option>
		<option value="bb">Baseball</option>
		<option value="bbb">Basketball - Boys</option>
		<option value="bbg">Basketball - Girls</option>
		<option value="c">Cheerleading</option>
		<option value="cc">Cross Country</option>
		<option value="d">Dance</option>
		<option value="f">Football</option>
		<option value="gb">Golf - Boys</option>
		<option value="sb">Soccer - Boys</option>
		<option value="sg">Soccer - Girls</option>
		<option value="sbb">Softball - Boys</option>
		<option value="sbg">Softball - Girls</option>
		<option value="tb">Tennis - Boys</option>
		<option value="tg">Tennis - Girls</option>
		<option value="tf">Track & Field</option>
		<option value="w">Wrestling</option>
		</select>
		
		<span id="school" style="display: none;">
		&nbsp; &nbsp;
		School:
		<select name="school" id="school_list" onchange="prep_fields('school', this.value)">
		</select>
		</span>
		
		<span id="coach" style="display: none;">
		&nbsp; &nbsp;
		Coach:
		<select name="coach" id="coach_list">
		</select>
		</span>
		
		<div style="clear: both;"></div>
	</div>

Jasconius

I got nothing.

You could programatically hide and reveal separate pre-written dropdown boxes with the same name/id attribute to simulate the same effect.

innerHTML does not behave universally, especially across the IE/Other guys gap.

SeñorAmor

I've used innerHTML before, cross-platform, in stuff way more complex than this and it works fine. There's gotta be something wrong with my code, but I can't find it.

SporkAndrew

(Grasping at straws here)

I'm not sure innerHTML works properly in IE when you try and make it fill something that isn't a div or another page element. Have you tried setting a div as id whatever and then innerHTMLing that a fully-filled in <select>?

But yeah, you could also just cop out and use your hide / show function to hide and show multiple selects on the same page.

SeñorAmor

There'd be dozens of selects due to all the possible combinations of sports, schools and coaches that I'd rather not have to figure out. :P

Nova_C

Well, I don't see any missing '<' or '>', but I write dynamic pages using servlets and javascript for both FireFox and IE and I've noticed FireFox is MUCH better at coping with syntax errors. A lot of times a page works just fine in FireFox, but something goes weird in IE and it turns out I was missing a single ending '>' and FireFox just handled it without telling me.

That's all I can think of for now, I'll continue reviewing your code.

EDIT: I just cut & pasted your code and it worked fine in FF and IE 6 (I'm on Win2K), so I dunno.

Jasconius

Why not do a postback with PHP and populate the list accordingly?

telcus

Rather then using innerHTML, how about inserting a new option element instead?

Looping through the elements you want to add to the list:

document.getElementById('school').options[i] = new Option('new text', 'new value');

That way your making the DOM interface do the work for you.