It's a tricky one. I am writing a Tampermonkey (vanilla JS injector plugin for chrome) script to automate a third-party site that I use for work every day hundreds of times. The part I'm stuck on is I believe an AngularJS form (code below). I need to change the value of the input and submit it, so it can update a table on the website. Please note it doesn't relode the site, it works with ajax/jquery/AngularJS (don't know).
I've noticed that the tricky part lies in the input, the "ng-pristine ng-valid" seems to be some AngularJS data validation, which is required to submit the form, although I have no idea how to trigger it after changing the value of the input/ nor how to submit the form. Changing the value seems to be working. The whole form is in an iframe, although not sure whether that makes any difference.
I've added the IDs of the elements below so it is easier to refer to those elements, but they don't normally exist in the code, i get them by querySelectors
<form id="form" ng-submit="updateTab()" class="ng-pristine ng-valid">
<div class="input">
<div class="input__container">
<input id="input" type="text" class="input ng-pristine ng-valid" ng-model="QueryParams.query">
<button id="button" class="button">Search</button>
</div>
</div>
</form>
I've done things like this many of times before simply setting the value and clicking the button like so:
document.getElementById("input").value = "some value";
document.getElementById("button").Click();
But it doesn't work. I also tried the below after the value change and before .click() as there seems to be some some of data verification, but it still didn't help.
document.getElementById("input").dispatchEvent(new Event("change"));
document.getElementById("input").onchange();
Submitting the form just reloads the website, which doesn't achieve anything.
