Populating input element dynamically via Javascript not being recognized when submit

Question

I have an input like this:

<input class="form-control" id="captchaInput" type="text" placeholder="Type characters here" data-reactid=".6.0.1">

Through Tampermonkey, I'm filling in this value like this:

document.getElementById("captchaInput").value = captchaValue;

When I try and submit this, it says "doesn't match" - but if I were to type the exact same thing manually it works.

Answer 1

Assigning to value doesn't trigger any events, so it sounds like whatever page you're doing this on expects to see an event. (It looks like the input's controlled by React, so that doesn't surprise me, since a React controlled control keeps the value separately from the control, updating when events occur.)

You'll want to trigger an event programmatically, probably input. This question's answers say how to do that, e.g.:

const input = document.getElementById("captchaInput");
input.value = captchaValue;
input.dispatchEvent(new Event("input", {
    bubbles: true,
    cancelable: true
}));

...but see the linked question's answers for details and handling Internet Explorer (the IE parts may not apply to IE11, try the above first).