Trigger OnChange when field is filed automatically?

Question

I want to trigger a function when one of my field (textbox) changed. The problem is: the content of that textbox is filed automatically by an external script(That I don't have access to), therefore the onChange listener won't trigger.

I've tried a lot of code, but here's the two closest (I think?) result I have:

Here's the script and the field

<script async src="SomeNiceScriptHere.js"></script>
<input type="text" name="wt_embed_output" id="wt_embed_output" class="wt_embed_output"/>

Code 1:

function myFunction() {
    var x = document.getElementById("wt_embed_output").value;
    alert("The input value has changed. The new value is: " + x);
}
    document.getElementById("wt_embed_output").addEventListener("change", myFunction);

Code 2:

$( "#wt_embed_output" ).change(function() {
  alert( "Value has been changed" );
});

For now, it doesn't work when the value is updated with the script, it only works when the user manually changes the value. Does anyone know a way to do it?

Do you have control over the external script? If so, make it call the change function after changing the value. If not, use `setInterval` to keep comparing the current value to the previous one, and call the function if they differ. — , May 16 '19 at 18:36
@RobbieMilejczak even with `document.getElementById("wt_embed_output").addEventListener("input", myFunction);` the code won't trigger — mr_info, May 16 '19 at 18:39
Have you tried input event as `$("#wt_embed_output").on('input', function(){ console.log("Your code here"); });` — Rohit Mittal, May 16 '19 at 18:40
This might help: https://stackoverflow.com/questions/42427606/event-when-input-value-is-changed-by-javascript — Robbie Milejczak, May 16 '19 at 18:48

Anand G · Answer 1 · 2019-05-16T19:07:43.507

0

Try adding event listener in the input.

var el = document.getElementById('wt_embed_output');
el.value = 'New Value'
el.dispatchEvent(new Event('oninput'));
  
document.getElementById("wt_embed_output").addEventListener("oninput", myFunction());


function myFunction() {
  var x = document.getElementById("wt_embed_output").value;
  alert("The input value has changed. The new value is: " + x);
}

<input type="text" name="wt_embed_output" id="wt_embed_output" class="wt_embed_output" />

edited May 16 '19 at 19:07

answered May 16 '19 at 18:47

Anand G

3,130
1
22
28

By adding: `onChange="myFunction()"` it still won't work, but you use `el.dispatchEvent(new Event('change'));`. Was I supose to add this code somewhere? – mr_info May 16 '19 at 18:57
Edited my Answer, check now – Anand G May 16 '19 at 19:11
this is triggered when the page load, but my script run when the user clicks a button. So technically it's working, but not for my usecase. – mr_info May 22 '19 at 13:15

saurabh · Answer 2 · 2019-05-16T19:32:47.117

0

onchange only occurs when the change to the input element is committed by the user, most of the time this is when the element loses focus.

try using oninput event;

if that doesn't work you can use a solution that works for all cases: set up a timing event using setInterval()

edited May 16 '19 at 19:32

answered May 16 '19 at 18:57

saurabh

2,553
2
21
28

It doesn't work, even with the `document.getElementById("wt_embed_output").value= "changes value";` I'm also trying by changing the value into the console. Do you think this cause an issue? – mr_info May 16 '19 at 19:03

score 0 · Accepted Answer · answered May 23 '19 at 14:03

This isn't a perfect solution, but it works. Since I wasn't able to fetch the text in the field right after the script execute, I did a little workaround with myFunction():

<script>
    function myFunction() {
        if(document.getElementsByClassName('wt_embed__message')[0].getElementsByClassName('main')[0].textContent != 'Upload completed!'){
            setTimeout(myFunction, 500);
        }
        else{
            var wt_output = document.getElementById("wt_embed_output").value;
            //do something
        }
    }
    window.addEventListener("load", myFunction);
</script>

-> When the page load, my function is called until the external scripts runs. Once I get a specified message, I know the script is done so I get out of the 'if' condition.

Trigger OnChange when field is filed automatically?

3 Answers3