Onchange not working in IE

JavaScript
1

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

2

In IE, you can’t use setAttribute() to add event handlers, so setAttribute() is not used to add event handlers in javascript. The simplest cross-browser method to add event handlers is:

theElement.onchange = someFunc;

However, if you subsequently write a line like that again, you will overwrite the previous function assigned to onchange. That may be what you want. But if you don’t want to overwrite the previous function, and instead you want to add additional functions to be executed onchange, you need to use one of the following methods:

addEventListener() – W3C DOM, Firefox, etc.
attachEvent() – IE

and you use object detection to automatically execute the right one, e.g.:


if(theElement.addEventListener)  theElement.addEventListener(....);
elseif(theElement.attachEvent) theElement.attachEvent(....);
else alert("Your browser sucks.  Go away.")
3

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

4

This works fine in IE:


<html>
<head>
<script type="text/javascript">
function addEvtHandler() {
	var objField = document.getElementById("theSelect");
	objField.onchange = function () {
		myFunc(1,2,3);
	}
}
function myFunc(a,b,c) {
	alert(a+b+c);
}
window.onload = addEvtHandler;
</script>
</head>
<body>
<select id="theSelect">
	<option value="1">option 1</option>
	<option value="2">option 2</option>
</select>
</body>
</html>
5

Hi jimfraser,

Unfortunately, this doesn’t work either. It seems that ie only allows the onchange to be set to the function name and nothing else (it won’t even accept an alert).

I need to pass some externally provided parameters onto the function, which change each time I call it (see my first post). So I need a way to set the onchange to the function and the parameters rather than just the function name.

Any suggestions would be gratefully received, because I’ve been tearing my hair out over this for over a week now.

Debbie

6

Unfortunately, this doesn’t work either.

Did you copy and paste jimfraser’s example verbatim and then load the page in IE? If it doesn’t work, then you have js disabled in your IE browser.

7

Hi 7stud,

Yes, I have and it works fine, but it’s not what I need to be able to do.

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

8

Yes, I have and it works fine, but it’s not what I need to be able to do.

Ok, but you keep claiming in your posts that the idiom jimfraser posted does not work in IE, which isn’t true. Maybe your questions and statements would make more sense if you didn’t say things which trivial examples can prove are wrong.

I suggest you post a simple example(no more than 10 lines of code) that highlights the problem you are having. In addition, clearly state the actual results and the expected results.

You need to be able to get your code to work without any xhr requests, and then you can add the dynamic component later.

9

the idiom jimfraser

Hey, who are you calling an idiom???

:wink:

10

So you’re trying to pass parameters to an onchange event. What you need to do is be able to work out those parameters from within the onchange. One popular instance of this would be call a function with the VALUE of the selected option as a parameter…


mySelect.onchange = function () {
  // "this" refers to the select that triggered the onchange event
  var selectedOption = this.options[this.selectedIndex];
  var selectedOptionText = selectedOption.innerHTML;
  myFunc("fixed string", selectedOption.value, selectedOptionText);
}