IE does not fire change event
I have a problem firing an event on change
in IE. Everything I've tried works in other browsers like Chrome, Mozilla, Safari, Opera ... but not 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 so far
$(document).on('change','#exchangeType input' ,function(){
...
}
$(document.body).on('change','#exchangeType input' ,function(){
...
}
$('#exchangeType').on('change','input[name=deliveryDate]',function(){
...
}
same functions with ' click
' (do not change)
I have read and followed some answers to similar questions on stackoverflow:
- Jquery select change not firing
- .val () doesn't fire .change () in jquery
- OnChange doesn't fire in IE
But it doesn't work ...
thank
source to share
Sometimes the onChange event doesn't work with IE. You can try another event to achieve the same. Use keyup instead. Hope this helps!
Here you have radio buttons, so you can use that, an example is given below:
<input type="radio" name="namehere" value="1" onclick="handleClick();" onchange="javascript:yourmethod()"/>
function handleClick()
{
this.blur();
this.focus();
}
source to share
Since this doesn't work in IE, you can do something like this:
var previousFormState = getFormState();
setTimeout(function() {
var formState = getFormState();
if (differs(formState, previousFormState)) {
handleChange();
previousFormState = formState;
}
}, 1000);
There are many used here function
, I believe you can implement them, but the algorithm should periodically check if the state has changed form
, and if so, handle the change. You will need to make sure you execute this one last time before submitting the submit
form using the handler .submit()
.
source to share