[Resolved] Cred Forms Conditional fields wrapped in a conditional field?

[Author]

Posts

[michaelR-26]

Tell us what you are trying to do?

I have a row with three columns. In each column I have a radio button to make the column active or not active using a conditional.

What am trying to do is hide the row in the cred form, from the back end custom post type where I have access to a custom field called "Add Extra Promo Boxes". The field has two options: "No Extra Boxes", "Add 3 boxes"

The values for the radio buttons are: No Extra Boxes = 1, Add 3 boxes = 2.

I would like for the row with the extra 3 boxes on the Cred Form to be hidden unless I have selected the Add 3 boxes option in the backend custom post type editor. Which in this case I have selected the Add 3 boxes option.

I have applied the conditional like this on my cred form. The problem is, the row is hidden instead of revealed!

[cred_show_group if="( $(add-extra-promo-boxes) eq '2' )" mode="fade-slide"]

<div class="row extra-promo-boxes-1">

<div class="col-md-4">
<div class="form-group promo-box">[cred_field field="select-promo-4" force_type="field" class="form-check-input" output="bootstrap"]
[cred_show_group if="( $(select-promo-4) eq '1' )" mode="fade-slide"]

<div class="promo-form-fields"><label>Promo Box #4 Picture </label>
[cred_field field='promo-picture-4' force_type='field' class='form-control' output='bootstrap' previewsize='thumbnail']
</div>

<div class="promo-form-fields">
<label>Promo Box #4 Caption</label>
[cred_field field='promo-picture-4-caption' force_type='field' class='form-control' output='bootstrap']<b>Characters left:</b> <b><span id="chars88">30</span></b>
</div>

<div class="promo-form-fields">
<label>Promo Box #4 Description</label>
[cred_field field='promo-picture-4-description' force_type='field' class='form-control' output='bootstrap']<b>Characters left:</b> <b><span id="chars41">100</span></b>
</div>

<div class="promo-form-fields">
<label>Promo Box #4 URL</label>
[cred_field field='promo-4-url' force_type='field' class='form-control' output='bootstrap']
</div>

[/cred_show_group]</div></div>

<div class="col-md-4">
<div class="form-group promo-box">[cred_field field="select-promo-5" force_type="field" class="form-check-input" output="bootstrap"]
[cred_show_group if="( $(select-promo-5) eq '1' )" mode="fade-slide"]

<div class="promo-form-fields"><label>Promo Box #5 Picture </label>
[cred_field field='promo-picture-5' force_type='field' class='form-control' output='bootstrap' previewsize='thumbnail']
</div>

<div class="promo-form-fields">
<label>Promo Box #5 Caption</label>
[cred_field field='promo-picture-5-caption' force_type='field' class='form-control' output='bootstrap']<b>Characters left:</b> <b><span id="chars99">30</span></b>
</div>

<div class="promo-form-fields">
<label>Promo Box #5 Description</label>
[cred_field field='promo-picture-5-description' force_type='field' class='form-control' output='bootstrap']<b>Characters left:</b> <b><span id="chars42">100</span></b>
</div>

<div class="promo-form-fields">
<label>Promo Box #5 URL</label>
[cred_field field='promo-5-url' force_type='field' class='form-control' output='bootstrap']
</div>

[/cred_show_group]</div></div>

<div class="col-md-4">
<div class="form-group promo-box">[cred_field field="select-promo-6" force_type="field" class="form-check-input" output="bootstrap"]
[cred_show_group if="( $(select-promo-6) eq '1' )" mode="fade-slide"]

<div class="promo-form-fields"><label>Promo Box #6 Picture </label>
[cred_field field='promo-picture-6' force_type='field' class='form-control' output='bootstrap' previewsize='thumbnail']
</div>

<div class="promo-form-fields">
<label>Promo Box #6 Caption</label>
[cred_field field='promo-picture-6-caption' force_type='field' class='form-control' output='bootstrap']<b>Characters left:</b> <b><span id="chars111">30</span></b>
</div>

<div class="promo-form-fields">
<label>Promo Box #6 Description</label>
[cred_field field='promo-picture-6-description' force_type='field' class='form-control' output='bootstrap']<b>Characters left:</b> <b><span id="chars43">100</span></b>
</div>

<div class="promo-form-fields">
<label>Promo Box #6 URL</label>
[cred_field field='promo-6-url' force_type='field' class='form-control' output='bootstrap']
</div>

[/cred_show_group]</div></div>

</div>

[/cred_show_group]

[Luo Yang]

Hello,

I have tried your codes in my localhost with a fresh WP installation + the latest version of Toolset plugins, it works fine, so the problem is abnormal, please check these:
1) Make sure you are using the latest version of Toolset plugins, you can download them here:
https://toolset.com/account/downloads/

2) In case it is a compatibility problem, please deactivate all other plugins, and switch to wordpress default theme 2020, deactivate all custom PHP/JS code snippets, and test again

3) Also check if there is any PHP/JS error in your website:
https://toolset.com/documentation/programmer-reference/debugging-sites-built-with-toolset/

4) If the problem still persists, please provide database dump file(ZIP file) of your website, you can put the package files in your own google drive disk, share the link only, also point out the problem page URL and form URL, I need to test and debug it in my localhost, thanks
https://toolset.com/faq/provide-supporters-copy-site/

[Luo Yang]

Thanks for the details, I am downloading the files, will update here if find anything

[Luo Yang]

Since you did not put the add-extra-promo-boxes field into Toolset Forms, so the shortcodes:
[cred_show_group if="( $(add-extra-promo-boxes) eq '2' )" mode="fade-slide"]
...
[/cred_show_group]

Won't be able to work.

In your case, you can try wpv-conditional shortcode, for example:

[wpv-conditional if="( $(wpcf-add-extra-promo-boxes) eq '2' )" ]
Here display something
[/wpv-conditional]

More help:
https://toolset.com/documentation/user-guides/views/conditional-html-output-in-views/

[michaelR-26]

That worked perfectly!