Weird Problem - function not being called...

[Jeanco]

Hello,

I am trying to debug a basic script I am running in IE. It works fine in firefox, but it seems that the function being called onClick() is not actually being called in IE.

Here is the code (we're looking at the showPreview() function):

<script type="text/javascript">

function resetScreen() {
document.getElementById("announcementPreview").innerHTML='<?php echo $info; ?>';
}

function showUpload() {
document.getElementById("announcementPreview").innerHTML='<center><img src="images/loadingAnimation.gif" alt="..." border="0" /><br /><b>Uploading...</b></center>';
}

function showEmail() {
document.getElementById("announcementPreview").innerHTML='<center><img src="images/loadingAnimation.gif" alt="..." border="0" /><br /><b>Sending Emails...</b></center>';
}

function showPreview(spnsr, pgm, cmp) {
	var xmlHttp;
	alert("I'm here!");
	try {
		// Firefox, Opera 8.0+, Safari
		xmlHttp=new XMLHttpRequest();
	} catch (e) {
		// Internet Explorer
		try {
			alert("Trying IE 1");
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				alert("Trying IE");
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
				alert("Your browser does not support AJAX!");
			return false;
			}
		}
	}

	xmlHttp.onreadystatechange=function() {
		if(xmlHttp.readyState==4) {
			document.getElementById("announcementPreview").innerHTML=xmlHttp.responseText;
		}
/*		if(xmlHttp.readyState==1 || xmlHttp.readyState==2 || xmlHttp.readyState==3) {
			var loadingImg = '<img src="images/loadingAnimation.gif" alt="Loading.." style="margin:auto;">';
			document.getElementById("announcementPreview").innerHTML=loadingImg;
		}
*/
	}

	var appendString = "?spnsr="+spnsr+"&pgm="+pgm+"&cmp="+cmp;
	xmlHttp.open("GET","AJAX_showAnnouncement.php" + appendString,true);
	xmlHttp.send();

}
  
</script>

The problem is the showPreview() function. As you can see I currently have an alert box there to let me know that the browser has at least entered the function. This alert never displays in IE.

Here is the code that SHOULD be calling this function (it happens in the <option> tags...):

<form action="index.php" method="post">
<select name="choices[]" size="10" multiple>
<option onclick="resetScreen()" value="">Clear Preview</option>
<option value="">- - - - - - - - - - - -</option>
 <option onclick="showPreview('RES000000', '1200', '200706');" value="RES000000-1200-200706">RES000000-1200-200706.html</option>
<option onclick="showPreview('RES000678', '0100', '20071101');" value="RES000678-0100-20071101">RES000678-0100-20071101.html</option>
<option onclick="showPreview('RES000678', '0400', '20070101');" value="RES000678-0400-20070101">RES000678-0400-20070101.html</option>
<option onclick="showPreview('RES000678', '1101', '20071101');" value="RES000678-1101-20071101">RES000678-1101-20071101.html</option></select><br />
<input name="submit" type="submit" value="Generate These Announcements" style="width:225px;"/><br /><br />
<input name="submit" type="submit" value="Generate All Announcements" style="width:210px;" /><br /><br />
<input name="submit" type="submit" value="Generate Listings Page" /><br /><br />
<input name="submit" type="submit" value="Upload Files" onclick="showUpload();" /><br /><br />
<input name="submit" type="submit" value="Send Emails" onclick="showEmail();" />
</form>

Any ideas?

A few notes:
- javascript is enabled
- the alert box works if I put it outside the functions (that is, it runs when the page is loaded)

Much appreciating to anyone who can solve this!

[Buddy Bradley]

I don't think OPTIONs have click events - at least, I've never used them. I always use the change event of the SELECT and test the value of it.

[Kravvitz]

IE doesn't support any non-proprietary (e.g. normal HTML) events on <option> elements. You'll need to use an onchange handler on the <select> and string.split().

It's best to avoid using inline event handlers. I suggest you read up on Unobtrusive JavaScript and other JavaScript Best Practices.