I would like to simulate user input on a website using JavaScript. To do so, I simply do something like this:
a = document.getElementsByClassName('field-name')[0];
a.value = 'new value';
However, on some websites which require you to click "Send" after the input, the button remains inactive (sorry for not providing the example, the only sites with that feature that I know of require logging in).
I remember that I once fixed that problem by "Updating" the element afterwards, but I don't remember exactly how. I have tried adding this:
const change = new InputEvent('change');
a.value = 'new value';
const isNotCancelled = a.dispatchEvent(change);
But no luck here. Any ideas how to overcome this?
Update: Just as an example: here is a website which does what I described. Just click the chat icon on the bottom right and input random stuff for email and etc., then you will see the input box with the button that I described.
The InputEvent's type should be either beforeinput or input (input, in your case), not change; you might also consider firing a an Event at it with type set to "change" (there is no specific ChangeEvent constructor). For the input event, be sure you set bubbles: true since the default for the constructor is false but input events bubble (change events don't, although some libraries make them do so). You might also need to blur the field, and you might focus it at the start (so the blur does something).
For instance:
const a = document.getElementsByClassName("field-name")[0];
// Or: const a = document.querySelector(".field-name");
a.focus();
a.value = "new value";
a.dispatchEvent(new InputEvent("input", {bubbles: true, cancelable: true}));
a.dispatchEvent(new Event("change", {bubbles: false, cancelable: true}));
a.blur();
If none of those work, find the button and set its disabled to false.