Radio Button Scroll to Anchor and Dependency Conflict

Hello @kimcoetzee

I’m testing your form, and the dependencies are working fine. Please, watch the video by visiting the following link:

https://wordpress.dwbooster.com/customdownloads/2021/05/05/video-o.mp4

Best regards.

Hello Yes sorry I was working on the page so I removed the scroll to link for a short while. I have now re-included the anchor link for the first image. As you will see it scrolls but the dependencies don’t work. Please have a look https://www.limencodesign.co.za/cable/products-page/ and advise. Thank you

Hello @kimcoetzee

The issue is simple.

In the web development if you have this tags structure:

<a href="#field_1-1"><img src="https://www.limencodesign.co.za/cable/wp-content/uploads/2021/05/Submersible-4-Core-Cable-Connection-x500.png" class="cabimg" alt="Submersible Cable" style="width:220px;"></a>

And you click on the image, the anchor tag <a> takes the onclick event and processes it without communicating the onclick to its parents’ tags. So, our plugin is not notified about the onclick events.

So, you cannot implement your project in this way. An alternative would be to jump to the dependent field by coding.

I’ll try to describe the process with a hypothetical example. Assuming the values of radio buttons field fieldname83 are 1, 2, and 3. And you want:

* Jump to “#field_1-1” by ticking the first choice.
* Jump to “#field_2-1” by ticking the second choice.
* And jump to “#field_3-1” when the user ticks the third choice.

You can insert a calculated field in the form of an auxiliary, with an equation similar to:

(function(){
if(fieldname83 == 1) document.location.href="#field_1-1";
if(fieldname83 == 2) document.location.href="#field_2-1";
if(fieldname83 == 3) document.location.href="#field_3-1";
})()

Best regards.