Changes not reflected when setting text input value with javascript/jQuery

Question

I am trying to execute some Javascript in the console on Google Chrome at the checkout page of http://www.adidas.co.uk/.

Using the following to fill the input element with the below ID works fine as expected. $("#dwfrm_delivery_singleshipping_shippingAddress_addressFields_houseNumber").val("value here")

However, on different elements, as shown below, absolutely nothing happens and the text does not appear in the input field.

$("#dwfrm_delivery_singleshipping_shippingAddress_addressFields_firstName").val("value here")

You can see the page by adding a random item to the basket at http://www.adidas.co.uk/ and clicking "Checkout". I do not think providing HTML snippets would be helpful as I expect there to be something elsewhere on the page which is interfering.

I have tried setting the value by setting the value attribute directly, which also has the same effect of not updating the text input. Nevertheless, I am able to access my set values using jQuery's .val() method, just that for some input fields they do not display on the screen.

Why is this happening?

Did you delete your old question, make a new account and re-post it? — wot
– wot, Commented Jun 10, 2016 at 18:44
This exact question was posted a couple hours ago and someone had answered it. I can't seem to find it though. — wot
– wot, Commented Jun 10, 2016 at 18:45
you have amnesia or what? how are you not aware of what you did a couple of hours ago? — I wrestled a bear once.
– I wrestled a bear once., Commented Jun 10, 2016 at 18:47
@PootieTang "No not that I'm aware of?" wasn't me suggesting I have an inability to remember or a lack of awareness, but merely a pleonastic form of "No.". — JohnCena
– JohnCena, Commented Jun 10, 2016 at 19:46

Božo Stojković · Accepted Answer · 2016-06-10 18:53:06Z

1

@Emrah Izci Try running this:

Array.prototype.slice.call(document.getElementsByTagName("input")).forEach(function(elem, ind, arr) {elem.value = "TEST"});

I'm not sure what this means. Maybe there are hidden inputs that hold the actual value or something?

answered Jun 10, 2016 at 18:53

Božo Stojković

2,9431 gold badge31 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JohnCena Over a year ago

There were multiple DOM elements with the same ID, presumably dynamically added for some reason. Referring to the elements by class and setting the value on all of them solved my problem. Many thanks to you all on this wonderful day.

Božo Stojković Over a year ago

I'm glad I helped :)

emrhzc · Accepted Answer · 2016-06-10 18:58:15Z

0

You have changed the actual value of the input, but the shown value is not that, since it is angular driven HTML, angularJS controls what to display, yet does not takes console interference into account.

run after modification

$("element").trigger('input');

edited Jun 10, 2016 at 18:58

answered Jun 10, 2016 at 18:48

emrhzc

1,49012 silver badges20 bronze badges

2 Comments

JohnCena Over a year ago

Thanks! This enabled me to find out about angularJS and its event handling. I edited your answer to include triggering the input event.

JohnCena Over a year ago

Actually, I mistook my testing - it actually doesn't work and it does not appear that the site uses angularjs.

Collectives™ on Stack Overflow

Changes not reflected when setting text input value with javascript/jQuery

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related