Input-element value-assignment via console isn't enough to complete form submission

Question

This falls between Information Security and JavaScript coding:

The developers of a certain website disabled the option to save form data. Not even usernames can be saved so I tried to overcome this with a Greasemonkey script, via:

document.querySelector('#username').value = "myUsername";

I can fill all non-password fields this way but this won't be enough:

After I filled all non-password fields with a similar document.querySelector operation, and after I manually inserted my password I clicked "Submit" but I'm being told that "all fields are necessary"; seems like the value assignments aren't "recognized" by the site.

Problem 1:

The content does become recognized if, for example, I delete the last letter of the assigned value, that is, if I navigate with the mouse to a certain field (the username field in that case), delete the last letter from myUsername so it becomes myUsernam and then if I bring back the e` and repeated this action, then submit is executed properly.

Problem 2:

Either way, seems I always need to click on each form-field with the mouse (that is, trigger an onclick event per each field); doing so for all fields triggers a modal (a popup) with a small "show us you're not a robot" type of quiz.

document.querySelector('#username').click(); doesn't seem to trigger a proper response (I get "undefined" in console); Nothing is happening compared to an actual mouse click on the field.

---

I tried to dispatch a change() event per each field but it doesn't change the situation.

My question

How to overcome the 2 problems of unrecognized values and the need to click oon each field and how could I overcome it with vanilla JavaScript?

Answer 1

I tried to dispatch a change() event per each field but it doesn't change the situation.

I think the problem is indeed that the JavaScript on the page expects some event. If you enter text normally you would trigger keydown, input and other events. Any of these events may copy the value of the textfield to some JavaScript variable. If you change the value of the textfield but don't trigger the event, the JavaScript won't notice the change.

Inspect the input field with the debugger tools in the browser, and list the attached events. That will give you a clue to which event to use. Then, trigger that event like this:

element.dispatchEvent(new Event("input"));