Javascript .click() function is not working

Question

I am trying out Javascript on Microsofts platform from the console. What I have done, is to enter the value of the form like this

document.forms[0][0].value="[email protected]";

When I search for the next button, I can do that file as well

document.forms[0][3]

https://imgur.com/a/JUn9tKt

My problem occur when I try to click the button with javascript using

document.forms[0][3].click()

https://imgur.com/a/b3cit0E

What is strange here is that when i MANUALLY click the button "Next" it works, but it doesnt seem to work with JavaScript. What am i doing wrong?

Answer 1

I tried it and I noticed under what conditions this occurs. It only gives an error if you enter the value programatically and then click submit.

The problem isn't that the submit click isn't working, the problem is with entering the email address in the input field. The email is being typed in the field but the underlying javascript is probably not triggered from setting the value through script. Manually clicking the text field and then running the click function works.

I noticed the JavaScript that sets the email address entered in the input field is triggered once you click outside the input field. This leads me to believe it's an event listener that sets a variable in JavaScript, and this variable is what's being sent to the server and not the input from the field directly.

To work around this we will first do a bit of reverse engineering to see how it works. Luckily JavaScript is very simple and we can easily see all event listeners using the handy developer tools in our browser like Firefox:

and Chrome:

All we need to do is try to send some of these events and see which ones are effective.

To determine if the event I was sending worked I first sent the click event to the next button to make it show the error, basically doing exactly what you did to purposefully make it fail, and tried sending events to the input field until the error disappeared since manually clicking next to the input field made the error disappear too, indicating that it refreshed the JavaScript value for the input field through an event listener.

Since we know the JavaScript is triggered when something happens to the input field, we can begin with assuming the input field has an event listener that I first tried sending focus and blur events. These didn't work, so I tried select which also didn't work. Then I tried the change event and success!

Here is the JavaScript code I wrote for this:

{
  const event = new Event("change");
  document.forms[0][0].value="[email protected]";
  document.forms[0][0].dispatchEvent(event);
  document.forms[0][3].click();
}

Note that I placed it in a block, that's just to adjust the scope to avoid redeclaring that event variable since one might potentially want to paste this script in the console multiple times.

In simple words, here is what we do:

1. Create a new Event object (using the Event constructor, since createEvent is deprecated).
2. Initialize our event as type "change"
3. Set the value the way you initally tried.
4. Dispatch our "change" event on the input field to trigger the JavaScript to take the value of the input field and store it in its variable.
5. Click the next button.

Another improvement to make is to avoid repeating ourselves like this:

{
  const email = "[email protected]"; // We separate this to make modifying easier.

  const form = document.forms[0];
  form[0].value = email;
  form[0].dispatchEvent(new Event("change"));
  form[3].click();
}

If you have any other problems or questions regarding your journey of learning JavaScript, you're more than welcome to ask for help! If any of my steps are unclear you can let me know, I try to explain the thought process a bit so you can learn how to use the available tools to troubleshoot the problems you encounter so you not only get a solution but also have an understanding of where that solution came from.