targeting ids in javascript which have been apended with a perch generated identifier

ndwl · Jan 20th 2021

How do you use getElementById in javascript with ids that get appended by a perch identifier?

E.g in "shop's" cart the product quantity input field gets appended with a unique identifier (number) for the product .

Code

<perch:input id="qty:<perch:cartitem id="identifier" />" min="" value="<perch:cartitem id="quantity"/>" type="number">

For processing purposes, the units of qty are CM (Centimetres) but I need to show the qty to the user in M (metres), so I need to apply a conversion to the value of this input (which will be hidden) and display the result in another input (qty_m - which will need to be paired with qty by sharing that same identifier). To do the conversion I was hoping to get the value of qty by using getElementById however the ID isn't qty it actually be qty:# (unique to each cart item)

hus_hmd · Jan 28th 2021

You can add a data- attribute to the perch:input tag. The rendered HTML input tag should retain the data- attributes, which you can use to target the input in JS.

SimonClay · Jan 29th 2021

If it was jquery you could use a wildcard* I think.

[id*=qty]

hus_hmd · Jan 29th 2021

Quote from SimonClay

If it was jquery you could use a wildcard* I think.

[id*=qty]

That works in vanilla Javascript too with querySelector() and querySelectorAll()

ndwl · Jan 31st 2021

Thanks both, I'll take a look tomorrow.