Home....
Developer Network >> Other Programming >> Scripting - Client Side

Onchange not working in IE

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
[2732 byte] By [Debbie-Leigh] at [2007-11-20 5:25:58]
«« [RESOLVED] Obvious Mistakes?
»» J Unit test! Really Weird
# 1 Re: Onchange not working in IE
The onchange event fires the exact same in IE as it does in every browser. Your difference is probably the function you are trying to call. Have you tried using alert('This showed! No. 1'); throughout your code to see which part fails in IE. Increment the No. 1 through X.
PeejAvery at 2007-11-8 0:41:55 >
# 2 Re: Onchange not working in IE
PeejAvery,

Oh boy, have I tried alerts! Yes, on pretty much every line, displaying all the variables too. I should have said I'd tried that.

That's why I know it sets the onchange, but doesn't seem to trigger it - the alert I put just after the function name didn't show.

Any ideas why it doesn't trigger the function?

Debbie
Debbie-Leigh at 2007-11-8 0:42:55 >
# 3 Re: Onchange not working in IE
It is possible that the two functions are conflicting. Have you tried testing that?

<select name="CountryId" id="CountryId" size="1" title="Choose a country" tabindex="1" onchange="alert('before first function');funChangeField(document.frmOrder,'Action','country');alert('after first function');funSubmitForm(document.frmOrder);alert('after second function');">
PeejAvery at 2007-11-8 0:43:51 >
# 4 Re: Onchange not working in IE
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
Debbie-Leigh at 2007-11-8 0:44:58 >
# 5 Re: Onchange not working in IE
I have not used IE for many years because in order for the onchange event to take place with a text <input> tag, the focus must be moved to a different element. I bet it is the same with the <select> tag. Try the following and see if it works.

Change the select and then press tab.
<select onchange="alert(this.value)">
<option value="Hello">Hello</option>
<option value="Hola">Hola</option>
<option value="Goodbye">Goodbye</option>
<option value="Chau">Chau</option>
</select>

<input type="button" value="Test">
PeejAvery at 2007-11-8 0:45:56 >
# 6 Re: Onchange not working in IE
Hi PeejAvery,

I totally agree about ie. Unfortunately, when you're writing for the public, you have to allow for ie too, because most of them are using it.

Back to your suggestion. Setting the onchange in the HTML is no problem - it works fine. The problem comes when I set it using javascript. That's when it refuses to trigger, unless you use only the function name without quotes.

As I said, I need to pass some parameters to the function, but I cannot figure out how to set the function and its parameters using javascript without enclosing it in quotes. If you don't use quotes, js thinks it is a function that needs to be executed there and then, which results in a 'Cannot load the document' dialog box.

That's why I'm desperately asking if anyone has any suggestions how I can set the onchange to a function and it's parameters and have it trigger correctly when the selection changes.

Debbie
Debbie-Leigh at 2007-11-8 0:46:58 >
# 7 Re: Onchange not working in IE
Have you tried attaching the event?

window.attachEvent('onload', functionname(param1, param2));
PeejAvery at 2007-11-8 0:48:00 >
Other Programming
Scripting - Client Side

Other Programming

All Classified

Other Programming New Topic

Other Programming Hot Topic