Reputation: 5012

OnChange not firing in IE

I wish to fire a Onchange event for all the changes of Form elements within a DIV

Here's the snippet

<html>
<body>

<div id="container">
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="text"/>
    <input type="text"/>
</div>

<script>
di = document.getElementById("container");
di.onchange = function(a){
alert("On Change Called");
}

di.onclick = function(a){
 alert("On Click Called");
}

</script>

</body>
</html>

The event is fired, when a focus is lost from any of the form elements to a new element of the form, when some content is updated (eg: the input box is updated)

The above code works fine for all browsers' but not for IE, any way to do this is IE

Upvotes: 12

Answers (7)

Roberto Mutti

Reputation: 95

I created this code to trigger the onchange event not triggered by Interenet Explorer.

Used with an asp.net textbox

<!-- LOCAL SCRIPT -->
<script type="text/javascript">
$(document).ready(function () {

  // CTRL - fix explorer bug for OnChange not triggered. Converted to OnBlur + test
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    var tempControl = $("#<%= textboxNAME.ClientID %>");
    var tempATTRIBUTE = "data-lastvalue";
    // GET - save current value inside attribute
    tempControl.attr(tempATTRIBUTE, tempControl.val());
    // BIND - onblur event
    $("#<%= textboxNAME.ClientID %>").blur(function () {
        var tempPrevValue = tempControl.attr(tempATTRIBUTE);
        // CTRL - is there a difference of value (onchange)
        if (tempControl.val() != tempPrevValue) {
            // SET - trigger change js binded to textbox
            $(this).change();
        }
        });
  }


});

Upvotes: 1

Julian

Reputation: 4666

I had the same problem in Edge and fixed it using an EventListener.

My code looked like this:

HTML:

<input type="text" id="my_id" name="my_name" placeholder="my_placeholder" onchange="my_function(this.value.trim())" autofocus>

Then I changed it to:

HTML:

<input type="text" id="my_id" name="my_name" placeholder="my_placeholder" autofocus>

JS:

document.getElementById("my_id").addEventListener("change", function() {
    my_function(this.value.trim())
});

Upvotes: 2

Aausuman

Reputation: 13

Actually Onchange does not work very well in IE. Here is what I did while using Javascript. You can replicate it accordingly.

Add ondrop event in HTML to call the function being called now, instead of onchange.

Add the following code in your js file

document.getElementById('--your selector--').ondragover = handle;

function handle(evt)
{
     evt.stopPropagation();
     evt.preventDefault();
     evt.dataTransfer.dropEffect = 'copy'
}

The ondragover will be made false by above code, and then ondrop will fire on all browsers and call the required function

Upvotes: 0

Amit Shah

Reputation: 8179

Mostly all web developer must have faced this issue.. yeh the older version of IE sometimes not firing the onChange event and replacing it with onClick works.

But this is not expected with latest IE 11. what I found in my case was the function name being called on onChange event was clashing somewhere. I just changed it to some other name which should sound like unique in the whole context, then it worked.

Conclusion: IE 11 getting confused when finds some similar names within the system matching with the onchange target function (even the file names I guess), while the other browsers are intelligent enough.

Upvotes: 1