Simulate sending data to the text input field with JS

user_3702034 0
Viewed 472

I have a task where I need to automate Sign in form authentication. For this example, I'll show you Tiktok authentication form (Mobile interface, not desktop. E-mail and password option)

form screenshot with inactive login button

If I enter text values into the fields programmatically, the Login button won't become active, and if I manually focus on the fields with a mouse click, the value disappears. These are two lines of code I run to put the value in:

let email_input = document.getElementsByName("email")[0];
email_input.value = 'sample@email.com';

I understand it needs to trigger a certain event to assign a value into it's JS model, but I can't figure out how to do it. I have tried sending change or input events onto this text field with no luck using this code:

let email_input = document.getElementsByName("email");
email_input[0].value = 'sample@email.com';

custom_event = new Event('input');
email_input[0].dispatchEvent(custom_event);

// tried also change, textInput like so:
custom_event = new Event('change');
email_input[0].dispatchEvent(custom_event);

But this does not seem to help. So my goal is to put values into both fields Email and Password in the way it will be detected and Log in button would become active.

Any suggestion would be much appreciated

javascript
3 Answers

You should first focus needed input element and then execute document.execCommand with insertText command:

let email_input = document.getElementsByName("email");
email_input[0].focus();
document.execCommand('insertText', false, 'sample@email.com');

With this method input\textarea value modification should be captured by all major frameworks including Angular and Vuejs. This modification will be processed by frameworks the same way as if user pressed "Paste" option in browser main menu.

user_8770990

It all depends...

Who/what are you? A normal browser user? A bot? The browser author?

Because code like this is useless...

let email_input = document.getElementsByName("email")[0];

What document are you referring to? Who's document? Did you inject this instruction into the page and executed it?

You're not telling us where you're coming from, but anyway...

If you are the browser author, or you can run JavaScript macros from your browser (ie: the Classic browser) then you can do something like this...

var Z=W.contentWindow.document.querySelectorAll('input[type="password"]');

 if(Z.length>0){ 

   Z[0].value='password123';

   Z=W.contentWindow.document.querySelectorAll('input[type="email"]');

   if(Z.length>0){Z[0].value='email@abc.com';}
 }

To automatically populate such fields, and if you also want you can SubmitButtonID.click() the submit button for as long as the isTrusted property is not tested by the website.

user_141189860

Continued...

Test if normal (non-custom) submit button exists and click...

  Z=W.contentWindow.document.querySelectorAll('input[type="submit"]');

  if(Z.length>0){

   if(Z[0].hasAttribute('disabled')){Z[0].removeAttribute('disabled');}  <--- Enable it if disabled

   Z[0].click(); <--- automate click

  }
user_141189860
Related