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

Answers:

Answer

Actually, IE, especially IE7/8 doesn't support onchange event very well . I do recommend you use onclick event.

Answer

onchange event does not bubble in IE according to MSDN.

Answer

Avoid using .focus() or .select() before .change() function of jquery for IE, then it works fine, im using it in my site.

Thanks

Answer

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.

Answer

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())
});
Answer

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

  1. Add ondrop event in HTML to call the function being called now, instead of onchange.
  2. 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'
    }
    
  3. The ondragover will be made false by above code, and then ondrop will fire on all browsers and call the required function

Answer

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();
        }
        });
  }


});

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.