[Resolved] Conditional View of Field with Toolset Form

[Author]

Posts

[chrisO-12]

Tell us what you are trying to do?

I have created a post form with a field that has a conditional view. When the condition is satisfied, the field is not displayed. Please share any insight as to what is causing this.

Here is the HTML for the post form.

[cred_show_group if="( $(established-start-up) eq 'Established' )" mode="fade-slide"]
<div class="form-group custom-form-group">
<label for="asking-price">Asking Price</label>
<input type="text" id="asking-price" class="custom-form-control">
<div id="asking-price-display" class="currency-display"></div>
<small class="form-text text-danger" id="asking-price-error" style="display: none;">Please enter only numbers.</small>
</div>
[/cred_show_group]

Here is rendered HTML for the established-start-up field. Notice that the value="Established" and checked="checked". This satisfies the conditional log for the Asking Price field.

<li class="wpt-form-item wpt-form-item-radio radio-established">

<input type="radio" id="cred_form_28643_1_1_established-start-up_Established" name="wpcf-established-start-up" value="Established" class="wpt-form-radio form-radio radio" checked="checked" data-wpt-type="radio" data-wpt-id="cred_form_28643_1_1_cred_form_28643_1_1_established-start-up_Established" data-wpt-name="wpcf-established-start-up"><label class="wpt-form-label wpt-form-radio-label" for="cred_form_28643_1_1_established-start-up_Established">Established</label>

However, the Asking Price field is not displayed. Here is rendered HTML from the form. Notice there is style="display:none" in the cred-group class in the first line. I can turn off this style and the field displays properly.

<div class="cred-group 28643_condition_aa7bda8ea2d5664b5a86bbe28a341493" style="display:none;" data-effectmode="fade-slide">
<div class="form-group custom-form-group">
<label for="asking-price">Asking Price</label>
<input type="text" id="asking-price" class="custom-form-control">
<div id="asking-price-display" class="currency-display"></div>
<small class="form-text text-danger" id="asking-price-error" style="display: none;">Please enter only numbers.</small>
</div>
</div>

Thoughts?
Thanks,
Chris

What is the link to your site?
hidden link

[Nigel]

Hi Chris

It's not very easy to determine such a problem with radio inputs, because unlike other form inputs the browsers maintains the selected input state internally, it's not something you can see in the markup (the checked attribute refers to the default, not the actively selected input).

The state is only obtainable by JavaScript, so you can use JS in the console to check which input is checked (but that is going to be the one you can visually see is checked).

Did you check the console for errors? The most likely explanation is some error on the page preventing the JS that manages visibility from running correctly.

[chrisO-12]

Hi Nigel,

Thank you for the reply. I am not a programmer, so do not fully understand all of the issues. Any Ideas? Not sure if I am looking at the right information, so please clarify if this is not what I need to be checking.

I added JS to the file to log the value of the radio button when the form is loaded and when the radio button is toggled back and forth from Established to Start-Up. This also logs the style-"Display:none" value for the Asking Price field. This shows that the style never changes.

An image of the Console Log is attached, and also images of the markup with the style="display:none" when enabled and disable in the browser.

[chrisO-12]

Hello,

Two items.

1. Is there any way to set this up so that I can receive help for more that 1 time per day? I assume that time zones are an issue. If possible, I would like to get replies more frequently.

2. With the assistance of ChatGPT, I have some JS that overrides the default display:none for conditional fields. I prefer not to add this complexity to my site. I am sharing this code as reference. This JS has worked to restore the conditional function for one of the fields - Asking Price. Asking Price field should be visible if the wpcf-established-start-up field has a value of Established, but this is not working with the normal Toolset conditionals as mentioned before. The JS below causes this to work.

document.addEventListener('DOMContentLoaded', function() {
// Select all radio buttons with the name "wpcf-established-start-up"
const establishedStartUpFields = document.querySelectorAll('input[name="wpcf-established-start-up"]');
// Use an attribute selector to target the class
const askingPriceContainer = document.querySelector('[class*="28643_condition_aa7bda8ea2d5664b5a86bbe28a341493"]');

if (establishedStartUpFields.length === 0 || !askingPriceContainer) {
console.error('Established/Start-up fields or Asking Price container not found.');
return;
}

function updateAskingPriceVisibility() {
const selectedRadio = document.querySelector('input[name="wpcf-established-start-up"]:checked');
if (selectedRadio && selectedRadio.value === 'Established') {
askingPriceContainer.style.setProperty('display', 'block', 'important'); // Show parent div with !important
} else {
askingPriceContainer.style.setProperty('display', 'none', 'important'); // Hide parent div with !important
}

console.log('Established/Start-up Field Value:', selectedRadio ? selectedRadio.value : 'None');
console.log('Asking Price Container Display:', window.getComputedStyle(askingPriceContainer).display);
}

// Initial check on page load
updateAskingPriceVisibility();

establishedStartUpFields.forEach(function(radio) {
radio.addEventListener('change', function() {
updateAskingPriceVisibility();
});
});
});

[chrisO-12]

Hello - could I get a status on this please?

[Christopher Amirian]

Hi there,

We apologize for the late reply. I wanted to check the page in question but I see the attached image.

Most probably the form is visible only when the visitor is logged in.

I'd appreciate it if you could give me the URL/User/Pass of your WordPress dashboard after you make sure that you have a backup of your website.
It is absolutely important that you give us a guarantee that you have a backup so if something happens you will have a point of restore.

Make sure you set the next reply as private.

Also, tell us where to find the form and the condition in question and we will check.

Finally please remove the ChatGPT JS so we can have a raw Toolset version.

Thank you.

[chrisO-12]

Yes, you must be logged in to see and use the form.

I was unable to figure out how to get the ToolSet conditional displays for the form fields to work. When there was a delay with receiving a reply, I developed JS (with the help of ChatGPT) that handles the conditional display of the fields. With the JS, I completely removed the ToolSet conditionals from the form fields. It is working fine without the ToolSet conditionals.

Wish I could have figured this out, but moving on without ToolSet feature.

[Christopher Amirian]

Hi,

I understand. Thank you for the reply.