Onchange not working in IE

Debbie-Leigh

Hi,

I have a select field that has an onchange attribute that fires an ajax script to fill out another field. It's working perfectly in every browser except IE, but I just cannot figure out why it's not being triggered in IE.

My code is:

The HTML:

<select name="CountryId" id="CountryId" size="1" title="Choose a country" tabindex="1" onchange="funChangeField(document.frmOrder,'Action','country');funSubmitForm(document.frmOrder);">

The js file (it's triggered first on page load to change the onchange attribute, if HTTPRequest is available, then when the field changes to fire off the HTTP Request and lastly to process the response to fill out and show the second field):

function funCountryChg(objResp, strUrl, objField, strMsgField) {
    // Process a country field when it changes
	var strHdgFld, strDataFld, objHdgFld, objDataFld;

if  (objResp == 1) {
    if  (window.XMLHttpRequest || window.ActiveXObject) {
        objField.setAttribute("onchange", "funCountryChg(2, '" + strUrl + "?Id=' + this.value, document.getElementById('" + strMsgField + "'));");
    }
} else if (objResp == 2) {
	if  (objField != null && objField != '') {
		objField.innerHTML = 'Please wait ...';
		objField.parentNode.className = objField.parentNode.className.replace(/hide/i, 'show');
	}
	funHTTPReq(strUrl);
} else {
	strHdgFld  = objResp.getElementsByTagName('hdgname')[0].firstChild.data;
	strDataFld = objResp.getElementsByTagName('dataname')[0].firstChild.data;
	objHdgFld  = document.getElementById(strHdgFld);
	objDataFld = document.getElementById(strDataFld);

	if  (objResp.getElementsByTagName('showrow')[0].firstChild.data == 1) {
		objHdgFld.innerHTML  = objResp.getElementsByTagName('hdgcontent')[0].firstChild.data;
		objDataFld.innerHTML = objResp.getElementsByTagName('datacontent')[0].firstChild.data;
		objHdgFld.parentNode.className = objHdgFld.parentNode.className.replace(/hide/i, 'show');
	} else {
		objHdgFld.innerHTML  = '';
		objDataFld.innerHTML = '';
		objHdgFld.parentNode.className = objHdgFld.parentNode.className.replace(/show/i, 'hide');
	}
}

return true;
}

IE is definitely setting the onchange attribute, but it just refuses to fire it when the selection changes.

Can anyone tell me what I have to do differently in IE to get it to fire the onchange event?

Thanks.

Debbie

Debbie-Leigh

Hi,

Well, I've tested this to death and tried a whole bunch of things. What I eventually found is the only way to get a javascript set onchange to fire in ie is to set the onchange attribute like this:

objField.onchange = funCountryChg;

It seems that ie treats event attributes totally differently than every other browser - as straight functions rather than allowing a function to be set as a string.

It doesn't even seem to like this:

objField.onchange = function(){funCountryChg()};

which I've seen quoted in many places as something you should be able to do.

My problem is that I need to pass a few parameters to the function at the time it is invoked, but ie doesn't seem to allow this. So, does anyone know of a way to that I can pass the parameters to the function when it is triggered?

Thanks.

Debbie

bradgrafelman

Debbie-Leigh wrote:
It seems that ie treats event attributes totally differently than every other browser - as straight functions rather than allowing a function to be set as a string

Are you sure? Maybe i'm misunderstanding you, but I wrote up this:

<script type="text/javascript">
function myFunction(piece1, piece2, piece3) {
alert(piece1 + ' ' + piece2 + piece3);
}
</script>
<select name="test" onchange="myFunction('hello', 'world', '!')">
<option>change me</option>
<option>..to me!</option>
</select>

and it worked as expected (alert box said "hello world!").

Debbie-Leigh

Hi bradgrafelman,

Yes, that would work fine, as it's set in the html. The problem arises when you set it using javascript.

If you have a look at my original post, I need to be able to call the function several times passing a different set of parameters each time.

Unfortunately, even though ie lets you set the onchange attribute to a string like all the other browsers (an alert has proven this), it doesn't make the onchange active unless you set it to the function name only (i.e. no () or parameters and not surrounded by quotes).

setAttribute works fine for setting the onchange too, but yet again, it's not active unless you use only the function name.

I've done a lot of testing and alert displaying to try and find out what's going on, but I've always been stumped at that last hurdle of trying to set an active onchange.

What I need to do is be able to set it to an executable string like with all the other browsers. Is there any way of doing this?

Debbie

greenie2600

Have you tried attaching the event handler with the addEventListener (W3C DOM) and attachEvent (IE DOM) methods of the <select> element? (you can test for the presence of these methods on the window object to determine which DOM is being used)

Also, check out the Prototype library, and the Scriptaculous library, which is based on Prototype. They're absolutely wonderful tools that make writing AJAX a breeze. Among other things, they abstract away all the browser inconsistencies so you don't ever have to worry about them.