0

I'm working on an option tokenizer for Magento Bundle Product.

I have a input type=number that I want to change with jQuery / Javascript.

<input id="bundle-option-7-qty-input" class="input-text" type="number" value="1">

To change the value I do this:

$("#bundle-option-7-qty-input").attr('value', 99);

The value is changing within the HTML element, but the look of the element does not change the number.

<input id="bundle-option-7-qty-input" class="input-text" type="number" value="99">

Wrong front-end value

Should be this:

Correct front-end value

It seems like the value attribute is somehow disconnected from the front-end view of the element itself.

I have looked at MDN article on this element and could not find any attribute that would be responsible for the front-end change: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

Any ideas how I can change this element's front-end look value?

UPDATE:

I have tried .val() it has the same effect - this is some kind of issue with input type="number"

If you create HTML file with:

And within the Chrome console change the value to 99

The front-end will still show 1:

input type ="number" after HTML element change in Chrome console

UPDATE: it looks like Magento 2 might be changing value property after / before I make the change with jQuery.

Is there a way to detect / block this change?

UPDATE: for now just putting setting timeout and then changing the input seems to work.

I'll see if I can detect the value change.

PaulM
  • 1
  • 3
  • Use `.val()`, not `.attr('value')` – Barmar Apr 26 '22 at 20:15
  • This has the same effect. Try editing and changing its value within Chrome console to - the value is changed, but the frontend will still show 99. – PaulM Apr 26 '22 at 20:19
  • Works for me: https://jsfiddle.net/barmar/px3k4beh/1/ – Barmar Apr 26 '22 at 20:21
  • The value attribute is the initial default value, the value property is the current value. – Barmar Apr 26 '22 at 20:22
  • @Barmar can something be preventing the input from being changed? Can I detect changes to the element? Maybe something is changing the input val before / after I make the change? – PaulM Apr 26 '22 at 20:34
  • Anything is possible. Without knowing all the libraries and frameworks you're using, it's hard to say what to look for. – Barmar Apr 26 '22 at 20:35
  • @Barmar ok thanks! If you want to post an answer, I'll accept it. – PaulM Apr 26 '22 at 20:41
  • I already closed the question as a duplicate, it can't be answered. – Barmar Apr 26 '22 at 20:47

0 Answers0