Using jQuery to target radio selections

Hi, hoping I can explain this clearly, I’m building a form that enables people to make selections to build a product. I’m using the Image Choices add-on to aid the choices displayed.

I have a row of base product types, three in total, so you can select one of them

The next row is four colour choices. So this is a radio field with four choices.

However, I need to hide colour choices based on the product type selected as not all colours are available for the base product type.

I can’t use conditional logic because that is tied to the field. So I was hoping to use a little jQuery to patiently wait and manage the hide/displaying of colours when a base product type is selected

So for example

Product 1
Product 2
Product 3

Colour 1
Colour 2
Colour 3
Colour 4

Product 1 is selected and Colours 2,3 and 4 are hidden
Product 3 is selected and Colours 2 and 3 are hidden.

The jQuery I’ve tried to implement seems to be ignored completely by the form, does anyone have any examples of using jQuery in association with a GF that I could use for inspiration.

I don’t want to resort to having four separate fields and using conditional logic on them as they’ll all stack vertically anyway, and would provide a horrible user experience.

Appreciate any help

Thank you

Darren

Got a form export handy? I can show you how to use ChatGPT and Code Chest to make lil tweaks like this.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.