Conditionally show html form field not working

Hi @penelopehathaway,

The plugin’s conditional logic functionality doesn’t rely on the user’s logged-in status. If you’re encountering this issue, it could be related to your site cache. Please try clearing the cache and see if that resolves the problem.

If the issue persists, kindly share the link to the site where the conditional logic plugin is active, and the logic has been applied. This will help us investigate further.

Looking forward to your response to proceed accordingly.

Thank you!

Hey @gurpreetk1 ,

https://learn.businessanalysisexperts.com/join-learn-business-analysis-by-example/ is where it is implemented on the first two pricing boxes, I had it deactivated yesterday because of some other fixes, sorry for that. I’ll leave it now for you.
Thank you!

Hi @penelopehathaway,

The problem of both the options are visible when the page is loaded is due to the way conditional logic is configured. I have attached screenshots of conditional logic that replicates the scenario that you are you’re aiming to achieve.

• Screenshot1
• Screenshot2
• Screenshot3
• Screenshot4
• Screenshot5
• Screenshot6

This should help you resolve the issue and ensure the conditions work as expected.

Please let us know in case you have any further query, we are here to assist you.

Thank you!

Thank you for your support, I did exactly what you had displayed in your screenshots and just didn’t get it to display only one pricing on pageload. I ended up adding a script:

That works now, you can close the ticket.

document.addEventListener("DOMContentLoaded", function() {

? ? // Function to check the selected radio button and show/hide the related HTML field

? ? function applyConditionalLogic() {

? ? ? ? // First membership logic

? ? ? ? var selectedOption1 = document.querySelector('input[name="form_fields[payment_plan]"]:checked');

? ? ? ? if (selectedOption1) {

? ? ? ? ? ? if (selectedOption1.value === 'yearly') {

? ? ? ? ? ? ? ? // Show yearly pricing for first membership, hide monthly pricing

? ? ? ? ? ? ? ? document.querySelector('.elementor-field-group-field_72648a6').classList.remove('cfef-hidden');

? ? ? ? ? ? ? ? document.querySelector('.elementor-field-group-field_9f9887f').classList.add('cfef-hidden');

? ? ? ? ? ? ? ? document.querySelector('.elementor-field-group-field_b8b4395').classList.remove('cfef-hidden');

? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? // Show monthly pricing for first membership, hide yearly pricing

? ? ? ? ? ? ? ? document.querySelector('.elementor-field-group-field_72648a6').classList.add('cfef-hidden');

? ? ? ? ? ? ? ? document.querySelector('.elementor-field-group-field_9f9887f').classList.remove('cfef-hidden');

? ? ? ? ? ? ? ? document.querySelector('.elementor-field-group-field_b8b4395').classList.add('cfef-hidden');

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? // Second membership logic

? ? ? ? var selectedOption2 = document.querySelector('input[name="form_fields[second_payment_plan]"]:checked');

? ? ? ? if (selectedOption2) {

? ? ? ? ? ? if (selectedOption2.value === 'yearly') {

? ? ? ? ? ? ? ? // Show yearly pricing for second membership, hide monthly pricing

? ? ? ? ? ? ? ? document.querySelector('.elementor-field-group-field_2b0c9f0').classList.remove('cfef-hidden');

? ? ? ? ? ? ? ? document.querySelector('.elementor-field-group-field_5abe888').classList.add('cfef-hidden');

? ? ? ? ? ? ? ? document.querySelector('.elementor-field-group-field_2987ade').classList.remove('cfef-hidden');

? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? // Show monthly pricing for first membership, hide yearly pricing

? ? ? ? ? ? ? ? document.querySelector('.elementor-field-group-field_2b0c9f0').classList.add('cfef-hidden');

? ? ? ? ? ? ? ? document.querySelector('.elementor-field-group-field_5abe888').classList.remove('cfef-hidden');

? ? ? ? ? ? ? ? document.querySelector('.elementor-field-group-field_2987ade').classList.add('cfef-hidden');

? ? ? ? ? ? }

? ? ? ? }

? ? }

? ? // Run the function on page load

? ? applyConditionalLogic();

? ? // Add event listeners to re-apply the logic when radio buttons are changed

? ? var radioButtons1 = document.querySelectorAll('input[name="form_fields[payment_plan]"]');

? ? radioButtons1.forEach(function(radio) {

? ? ? ? radio.addEventListener('change', applyConditionalLogic);

? ? });

? ? var radioButtons2 = document.querySelectorAll('input[name="form_fields[second_payment_plan]"]');

? ? radioButtons2.forEach(function(radio) {

? ? ? ? radio.addEventListener('change', applyConditionalLogic);

? ? });

});

Hi @penelopehathaway,

I’m glad to hear the issue has been resolved. The conditional logic provided in the previous reply is working perfectly on our side. The issue you encountered might have been related to site cache.

If you have any further questions or need additional assistance, please feel free to raise a new ticket.

Thank you!