Search code examples
javascriptgreasemonkeytampermonkey

How can I enable a disabled button with Greasemonkey?

I am targeting this website: https://ib.ing.cz/transactional-cz/#login/credentials

It has an input form that I can fill in using

document.querySelector('input[name=customer-id]').value = "1234567890";

However, the button that would let me go further is disabled. No matter what I try, it stays so until I start to fill in the form manually. How can I enable the button (and ideally click it programatically too)? I tried simulating keypresses or manipulating the "disabled" attribute of the button but I did not suceed.

UPDATE: I finally got it working, the code I am using is here: https://greasyfork.org/en/scripts/375326-p%C5%99ihla%C5%A1-se-na-ing (for some reason, I had to remove the if/else statement fro the answer, the condition was not true in the context of the script, even though it was in Firefox console)

However, there was some more magic that prevented this from working when I click the button (manually or via the script), getting an error message saying "the website is out of order".

It turned out one also needed to add "change" event. The original link in the answer leads to a oldish question referencing Firebug, which has since been incorporated into Firefox. The key for me was using the debugger. One just clicks right on the website and selects "inspect this element". Events associated with those elements then can be found after clicking on these little triangles in the inspector: enter image description here

And for reading the websites code, it is best to put the scrabmle they send into a beautifier like this: https://beautifier.io/

Solution

  • Reference Choosing and activating the right controls on an AJAX-driven site.

    Your target site runs its "Client number" validation (to enable that button, etc.) on a keyup event placed on an ancestor div of the input.

    This means that you must send a keyup event after setting the value, and make sure that the event bubbles up from the input.

    Like so:

    var cIdInpt = document.querySelector ('input[name=customer-id]');
if (cIdInpt) {
    var keyupEvnt   = new Event ('keyup', {bubbles: true} );  //  no key code needed in this case.
    cIdInpt.value   = "1234567890";

    cIdInpt.dispatchEvent (keyupEvnt);
}
else {
    console.error ("cIdInpt not found.");
}