i have a div with some elements.
<div>
<input value="" id="MyElement" type="text">
</div>
i added to my div the addEventListener like
document.getElementById("MyDiv").addEventListener('change', function (event)
{
alert(event)
var elem = event.target;
});
it's working fine if i change values by keyboard. but, when i change a value from JS, nothing happen.
for example
function test_1()
{
tmp = document.getElementById("MyElement")
tmp.value = "new value"
}
what i have to do to fire my OnChange?
ok, i solved with
document.getElementById("MyDiv").dispatchEvent(new Event("change"));
as suggest by "Sebastian Simon" thank you!
CodePudding user response:
You can use dispatchEvent
or fireEvent
as required.
Check Link for further details.
Update
Check the below snippet for working sample
document.getElementById("MyDiv").addEventListener('change', function (event) {
alert(event)
var elem = event.target;
});
document.getElementById("myInput").addEventListener('change', function (event) {
alert(event)
var elem = event.target;
});
function fnc() {
document.getElementById("myInput").value = "New";
var event = new Event('change');
document.getElementById("myInput").dispatchEvent(event);
document.getElementById("MyDiv").value = "Somethinig";
}
<div id="MyDiv">
hi
</div>
<input type="text" id="myInput" placeholder="Text" />
<button onclick="fnc()">Click to fire event</button>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
You can also try calling back the first function(used for alert) when entering values with different buttons .
Or you can create another alert when button is clicked to enter values
document.getElementById("MyElement").addEventListener('change', test_2)
function test_2() {
alert(event)
var elem = event.target;
};
document.getElementById("MyDiv").addEventListener('click', test_1)
function test_1() {
tmp = document.getElementById("MyElement");
tmp.value = "new value";
test_2();
}
<div>
<input value="" id="MyElement" type="text">
<button id="MyDiv">Try me</button>
</div>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
ok, i solved with
function test_1()
{
document.getElementById("MyDiv").dispatchEvent(new Event("change"));
}
as suggest by "Sebastian Simon" thank you!
so, to be complete, the problem was about apply Select2 on the dropdown. Select2 doesn't fire native Onchange, but fires its. that mean "addEventListener" will not fired when your dropdown change value. to do that, i created on its event a textbox, appended to him, fired the Onchange texbox and than remove it.
for example:
$('.js-example-basic-single').select2({dropdownAutoWidth : true});
$('.js-example-basic-single').on('change', function (e)
{
tmp_div = document.createElement("input");
e.target.appendChild(tmp_div)
tmp_div.dispatchEvent(new Event("change"))
e.target.removeChild(tmp_div)
});
<div>
<input value="" id="MyElement" type="text">
<select id="cmb_UM1" class="js-example-basic-single select2-hidden-accessible" data-select2-id="select2-data-ctl00_Content_cmb_UM1">
<option selected="selected" value="" title="" data-select2-id="select2-data-2-vplr"></option>
<option value=" 1001171997" title=" 1001171997" data-select2-id="select2-data-12-gcgl"> 1001171997</option>
</select>
</div>