IE does not fire up on change event

Question

I have problem with firing up on change event in IE. All what I have tried is working In other browsers like Chrome, Mozilla, Safari, Opera... but not in IE 11

Here is my code

html

<form method="post" id="exchangeType" action="/orders/vesselExchange">
...
<label id="deliveryDateTitleLabel" for="deliveryDate"><?= __('First time') ?></label><br/>
                <label class="radio radio-inline m-r-20">
                  <input type="radio" name="deliveryDate" value="asap" checked>
                  <i class="input-helper"></i>
                  <?= __('First time') ?>
                </label>

                <label class="radio radio-inline m-r-20">
                  <input type="radio" name="deliveryDate" value="custom">
                  <i class="input-helper"></i>
                  <?= __('Second time') ?>
                </label>
...
</form>

jQuery

$('#exchangeType input').on('change', function() {
  console.log('in function');
  let option = ($('input[name=deliveryDate]:checked', '#exchangeType').val());
  let dateTimePicker = $('#showPicker');

  if (option === 'custom') {
    dateTimePicker.removeClass('hidden');
  }

  if (option === 'asap') {
    dateTimePicker.addClass('hidden');
  }
});

What I have tried until now

$(document).on('change','#exchangeType input' ,function(){
...
}

$(document.body).on('change','#exchangeType input' ,function(){
...
}

$('#exchangeType').on('change','input[name=deliveryDate]',function(){
...
}

same functions with 'click' (not change)

I have read and implement some answers of similair questions on stackoverflow:
- Jquery select change not firing
- .val() doesn't trigger .change() in jquery
- OnChange not firing in IE

But it doesnt work...

Thank you

Possible duplicate of [OnChange not firing in IE](https://stackoverflow.com/questions/10876152/onchange-not-firing-in-ie) — Bob Swager, Jul 20 '17 at 07:32
try `$("body").on("change", "#elementID", function(){ //code here });` — N. Ivanov, Jul 20 '17 at 07:32
@BobSwager question is not duplicated. I have already tried with solutions from that question and it doesnt work, also that duplicated question doesnt have an answer. — JohnWayne, Jul 20 '17 at 07:38
@N.Ivanov I have tried but it doesnt work (in Chrome, Mozilla and Opera works, but not in IE) — JohnWayne, Jul 20 '17 at 07:38
@JohnWayne have you tried clearing your browser cache and reloading the javascript by clicking `Ctrl+F5`? Maybe the js hasnt refreshed. — N. Ivanov, Jul 20 '17 at 07:44
@N.Ivanov Yes, I have, actually this is bug on live system (reported by few users). — JohnWayne, Jul 20 '17 at 07:47
Have you managed this problem, because I'm in the same shose, please? — Sándor Hatvani, Nov 06 '17 at 11:56

Abhay Dixit · Answer 1 · 2017-07-20T07:56:18.533

0

Sometimes onChange event does not work with IE. You can try other event to achieve the same. Use keyup instead. Hope this helps!

Here you have radio buttons so you can use like this, example is given below:

<input type="radio" name="namehere" value="1" onclick="handleClick();" onchange="javascript:yourmethod()"/>

function handleClick()
{
 this.blur();  
 this.focus();  
}

edited Jul 20 '17 at 07:56

answered Jul 20 '17 at 07:41

Abhay Dixit

998
8
28

I have tried with on click, but it is the same, also I do not need 'keyup' function because users mostly click on this option with mouse – JohnWayne Jul 20 '17 at 07:48
I have updated answer for your radio button, I don't understand why its downvoted. – Abhay Dixit Jul 20 '17 at 07:50
Onclick event is written first because for radio button it doesn't make sense to fire onchange event because radio button not get focused. Once its clicked you can call onchange event to accomplish you requirement. (For IE this changes will work too, otherwise your implementation will work (but not on IE :) ) ) – Abhay Dixit Jul 20 '17 at 09:20

score 0 · Answer 2 · answered Jul 20 '17 at 09:32

Since this does not work in IE, you could do something like this:

var previousFormState = getFormState();
setTimeout(function() {
    var formState = getFormState();
    if (differs(formState, previousFormState)) {
        handleChange();
        previousFormState = formState;
    }
}, 1000);

There are a lot of functions used here, I believe you can implement them, but the algorithm is to periodically test whether the form state has changed and if so, handle the change. You will need to make sure you execute this one last time before you submit the form, using the .submit() handler.

IE does not fire up on change event

2 Answers2