Marketo Form select Custom Region(s) to show Locations - Javascript?

[megsie_k]

Hi All, 

I am setting up a subscription/preference centre and have come across an issue while building the preferences form.

Our company provides a range of services across various regions in Australia NSW and QLD.

My Scenario:

When a customer fills out the form they can select one or more regions via a checkbox and a list of locations associated with that region is displayed. (Similar to a Country picker that shows States once Countries are selected, but our list of regions/sites)

Also note, this form will be hosted on a Marketo Landing page, but I will also have other versions that will be embedded on a WordPress website.

What I tried:

Created a Region custom field and added it to the form as Checkboxes. Created a Sites custom field and added it to the form as Checkboxes. Set up visibility rules so that when a selected Region contains the region name a list of sites associated with that region is shown. This works fine if I select just one Region, but a customer may choose multiple Regions, when they do this only Sites for the first region show and not all Sites for all selected regions. See my example setup in the image below:

I've researched the forums and think JavaScript may be the answer to my problem. Can anyone assist with providing a starting point for me to set up the JavaScript to achieve my scenario?

[SanfordWhiteman · Accepted solution]

You're right that native Visibility Rules aren't intended to do this.

How feasible it is to do with native VRs depends on how many possible combinations of regions you have.

If you have only 3 regions, for example, there are 7 total combinations (R1, R2, R3, R1+R2, R1+ R3, R2 + R3, R1 + R2 + R3). Might be feasible to build and maintain 7 different VRs. But 4 regions means 15 VRs, which is pretty bad.

If I were doing it I'd have all the options in the list and then remove the inapplicable ones dynamically using JS.

[megsie_k]

@SanfordWhiteman Thanks for replying!

We have a total of 6 regions which I think is too many VR combinations to maintain.

Do you have an example/demo of how you would set up the JS to do this? I'm afraid I'm a novice when it comes to JS, but if I have an example I'm pretty good at updating it to suit my data.

[SanfordWhiteman]

My recent blog post on setting different select options per-LP has partial guidance. But really you need a developer, while this is basic DOM manipulation it isn’t basic JS in general.

[megsie_k]

Thanks, Sanford, I did see your blog post and thought it was a starting point.  I'm waiting on a quote for the JS from a developer, so hopefully, I can get this up and running soon.

Thanks again for all your great posts and help!