4

I'm trying to write javascript code that changes the value of an input field by using document.getElementById(“”).value, but the values are not really changing.

I'm testing it on some websites to check if it's working properly. When trying on Netflix (https://www.netflix.com/il-en/login) it's not working. This is how I do it: 

document.getElementById("email").value = 'change@change.com' ;
document.getElementById("password").value = 'change1234' ;

Since this website has also "value attribute" i've tried:

document.getElementById("email").setAttribute('value', 'change@change.com');
document.getElementById("password").setAttribute('value', 'change1234');

See screenshot that shows that DOM and html input values are being changed properly

After changing the value and focusing on the input fields or just trying to click on the "sign-in" button i can see that the input field values are the old ones or nothing.

See screenshot of old values in UI website but in DOM the values I entered

.

Meaning that the values are not really being set to ones that I assign them.

Any idea why and how can I set the input fields values properly?

Thanks!

Morag Hadad
  • 41
  • 1
  • 3
  • 1
    Forget netflix, did you try creating a simple HTML page and testing the same on that? – Krishna Prashatt Jun 26 '18 at 12:17
  • The value of the input and it's `value` property are two different things – Liam Jun 26 '18 at 12:17
  • `void(document.getElementsByName("q")[0].value="xxx")` works on this SO page, but the inspect value is not changed. `void(document.getElementsByName("q")[0].setAttribute("value","xxx"))` will change the value attribute – mplungjan Jun 26 '18 at 12:17
  • 1
    This is most likely because the values are stored in some model in the JavaScript runtime, and rendered out to the form. Updating the value of the field won't update the model since updates are bound to input events (in this case `onChange`, `onKeyUp`, `onKeyDown` etc). You can try manually firing an event on the field: `var event = new Event('input', { bubbles: true });` `document.getElementById('email').dispatchEvent(event);` – Andrei Nemes Jun 26 '18 at 12:27
  • @KrishnaPrashatt yes i did. also i tried to test on other websites like paypal for example and it worked – Morag Hadad Jun 26 '18 at 13:15
  • Hi @AndreiNemes, tried adding events on the element (dispatchEvent(new Event('onclick'));). I tried the following events: onchange, onkeyup, onkeydown, onkeypress, onpaste, oncut, oninput, onmouseover, onmousedown, onmouseup, onclick. none of them worked. any more ideas or events that can help? – Morag Hadad Jun 26 '18 at 13:16
  • @mplungjan that's what i tried. it's not working. – Morag Hadad Jun 26 '18 at 13:31
  • @Liam i know, that's why i tried them both. none of them worked. the value returned to be the old one after focusing on the input fields. – Morag Hadad Jun 26 '18 at 13:38
  • 2
    Yes it does work. The input field is changed but the representation is not. There is a GUI replacement for the input field that does not change – mplungjan Jun 26 '18 at 13:38
  • @mplungjan, correct. The GUI replacement is not working, when you click sign in it tries to sign you in with the old values (invalid credentials) or the input fields are empty if you didn't enter any previous value (throws error that you have to enter valid input) – Morag Hadad Jun 26 '18 at 13:48
  • It is likely working but since you set the value using setAttribute you do not trigger the onchange/oninput the UI is likely needing – mplungjan Jun 26 '18 at 13:51
  • @mplungjan I thought that is the case as well and tried events (like I mentioned in my comment to AndreiNemes). It didn't really worked. any idea why? or maybe I'm missing something? – Morag Hadad Jun 27 '18 at 06:29
  • The plugin used to style the input field is likely listening to an event handler. You need to find that one and trigger it – mplungjan Jun 27 '18 at 07:22

0 Answers0