Display a field if any field in a section matches a boolean

Get Help
1

Hi

I’d like to display an HTML block when any field a section is Yes.

I have 10 ready button fields, each of them with Yes or No as the choice.

I’d like to write a condition like, “show If any of the fields in <section> is Yes”

By referencing a Section. I hope to avoid having to specify 10 conditions in the logic.

Many thanks in advance :slightly_smiling_face:

Jon

2

Hi Jon,

You can set 10 conditions on the HTML block like in the following screenshot. Therefore, if the Yes option of any of those radio fields is selected, the HTML block will be displayed on the frontend.

Conditional Logic
Conditional Logic2654×1134 173 KB

Give it a try, and let me know how that goes! :smile:

3

Thanks Faisal

I’m trying to avoid having to specify 10 conditions. :slight_smile:

I want to specify one condition and have Gravity Forms parse all the fields in a Section (as if it was an array), then if any fields in the Section match the condition, show the HTML block.

That way, it saves time and also allows me to add fields without having to update the condition logic.

4

No worries, Jon. That’s possible using jQuery code. However, you will need to add a custom CSS class (cs_check_opt) to the Radio field settings, as shown in the following screenshot. This way, we can trigger our function to monitor the changes and control the display of the HTML block.

CSS Class
CSS Class718×1230 81.2 KB

Add the “cs_html_block” class to the HTML block to facilitate content display/hide functionality.

CSS Class
CSS Class732×1028 57.6 KB

Now, use the following jQuery code in your child theme JavaScript file or use the Simple Custom CSS and JS plugin.

Code:

jQuery(document).ready(function($) {
	$('.cs_html_block').css('display', 'none');

	$('.cs_check_opt .gfield_radio input[type="radio"]').change(function() {
		if ($('.cs_check_opt .gfield_radio input[type="radio"][value="Yes"]:checked').length > 0) {
			$('.cs_html_block').css('display', 'block');
		} else {
			$('.cs_html_block').css('display', 'none');
		}
	});
});

For a visual guide, please refer to the following screen recording: :point_down:

Give it a try, and let me know how that goes! :smile:

5

Hi Faisal

Unfortunately that didn’t work - the HTML block displays by default. It’s not hidden.

I followed your instructions, using the Simple Custom CSS and JS plugin.

Note: I’m using Gravity Forms page to break up this long form. The fields and HTML block are on the second page of the form.

I’m using the Divi theme.

Thanks anyway. :slight_smile:

6

Hi Joh,

Make sure to add the CSS class to the HTML block and add the jQuery code in Divi > Theme Options > Integration > Body. There is no need to use third-party plugins when you have Divi. However, the code will need to be wrapped in the <script> tags. Please try the following code.

Divi Theme Options
Divi Theme Options3674×828 195 KB

<script>
    jQuery(document).ready(function($) {
        $('.cs_html_block').css('display', 'none');

        $('.cs_check_opt .gfield_radio input[type="radio"]').change(function() {
            if ($('.cs_check_opt .gfield_radio input[type="radio"][value="Yes"]:checked').length > 0) {
                $('.cs_html_block').css('display', 'block');
            } else {
                $('.cs_html_block').css('display', 'none');
            }
        });
    });
</script>

(I’m working as CS at Elegant Themes [Divi]).

If you are having an issue, you can open live chat on both Gravity Forms or Divi.

7

Thanks Faisal

Still no luck. The HTML Block appears when the form loads, instead of being hidden.

I’ve checked that the CSS class and jQuery code is the places you’ve specified.

When I get to the second page of the form (which has the fields and HTML block), the HTML block displays instead of being hidden.

I’ll try a live chat - when is the best time to reach you?

Kind regards
Jon

8

Hi again,

Please share the exact webpage URL where I can find the form to further investigate. Thank you :blush:

9

Hi Faisal

Here’s the URL:

Thank you for looking into this. :slight_smile:

10

It seems that the code is not functioning correctly for some reason. Please export the form and send me the file so I can investigate further to resolve the issue. Thank you.

12

Thanks again. How should I send you the file? :slightly_smiling_face:

Attachments aren’t possible in this interface, and when I try to paste in the code, I get this error:

→ An error occurred: Body is limited to 32000 characters; you entered 39506.

13

You can use Google Drive or any other file-sharing website, such as EasyUpload, to send me the export file. Thank you. :smile:

14

Thanks mate.

https://easyupload.io/kpyx0m

“faisal"

15

Hi Jon,

It looks like the issue you might be having is due to a conflict with a third-party plugin. I have tested it on my end with and without signature add-ons, and both are working fine.

Now, go to Dashboard → Divi → Support Center and enable Safe Mode. If this works, disable Safe Mode and start deactivating your active plugins one by one to identify the culprit.

Safe Move
Safe Move2668×1138 228 KB

Also, ensure that all plugins, themes, and the WordPress core are updated to the latest version. You can test the form on my sandbox here: Jon – Nutrition | Gravity Forms Sandbox.

Thank you.

16

Hi Faisal

I’m going to set up a staging site to do this testing. That will take a couple of days.

All the plugins, themes and WordPress core are updated.

Thanks so much for your help. Very much appreciated. :slight_smile:

17

You’re welcome.

If you need any help, you know how to find me.

Have a good day, Jon. :handshake:

18

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