Geek Answers Handbook

Failed to retrieve value attribute from DOM +/- box element

I want to extract the “value” attribute from a selection box that allows users to select the quantity quantities of a particular item on my website.

I am new to Javascript and HTML. When I do "Validation Element", I see an attribute in the element

<input size="2" type="text" autocomplete="off" class="cart_quantity_input form-control grey" value="2" name="quantity_8329349_28095_0_12035">

But when I try to do one of the following two things, the Google Tag Manager says the variable is undefined

 document.querySelectorAll("input.cart_quantity_input.form-control.grey").value

OR

 document.querySelectorAll("input.cart_quantity_input.form-control.grey").getAttribute("value")

Order Transaction URL www.decathlon.in/order

+5
source share
2 answers

querySelectorAll returns a list of nodes. You need to either:

  • extracts the corresponding element by index from the list:

     document.querySelectorAll("input.cart_quantity_input.form-control.grey")[0].value

  • use querySelector to select only one item:

     document.querySelector("input.cart_quantity_input.form-control.grey").value
+3
source

Since you use GTM, why not use it for what it was intended for (which should make it a bit easier for you from coding)? Here is a solution that does not require code and uses the GTM built-in DOM variable:

GTM DOM Variable

You can set it to return the value attribute based on the CSS selector for the input element.

0
source

More articles:


All Articles