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):
Code:
<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...):

Code:
<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!