NO BUG: The "id" attribute of my select element changes everytime I save

Bugs
1

Browser: Chrome Version 120.0.6099.130
OS: Windows 11

Bug or Feature?!
Basically, I created a Form with various elements. One of the elements was a select element (dropdown). I wanted to style the option depending on what option was chosen.

This is the problem (bug?) I ran into: every time I change the JavaScript in Bricks and save, the select element gets a new id assigned. This makes it impossible to grab the element via its id.

My workaround: the select element has a unique name attribute, which you can use to grab the element.

2

Hi @Mazzy ,

May I know if you are referring to Bricks form?
I don’t think we have Select element.
The select field inside the Bricks form got a unique ID and it’s static upon creation.

image
image415×758 16.6 KB

Regards,
Jenn

3

Hi Jenn,

I’m using the Bricks form builder, and the same select element that you sent over in your screenshot.

Here is a screen recording of what I experience:
https://watch.screencastify.com/v/6RHwumAgugznsCTLxBmt

You can see how the id-attribute changes as soon as I save the new JavaScript code.

Best,
Maz

4

Here is a screenshot of my select element within Bricks:

chrome_4oEWnDYS0F
chrome_4oEWnDYS0F508×760 17.6 KB

Note, that the id shown here is the last part of the name attribute (as seen in the video) of the select element. But the id, as seen via Chrome dev tools, is different.

5

Hi @Mazzy ,

Thanks for the video. Now I get what you mean.
The input ID will be generated randomly to avoid duplicated ID if the Form is using in Query Loop. Which is the expected result.

To address this issue, you can target your select input by using the name attribute.
form-field-jvozfu

Example:

const selectInput = document.querySelector(`select[name="form-field-jvozfu"]`)

console.log( selectInput?.value )

Regards,
Jenn

6

Thanks Jenn,

that’s exactly what I ended up doing! :slight_smile:

Appreciate you clearing this up!

Best,
Maz