Skip Navigation

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

This thread is resolved. Here is a description of the problem and solution.

Problem:

Display different content depends on custom field value.

Solution:

You can try wpv-conditional shortcode, for example:

https://toolset.com/forums/topic/cred-forms-conditional-fields-wrapped-in-a-conditional-field/#post-1767785

Relevant Documentation:

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

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 7.01 hours from now. Thank you for your understanding.

This topic contains 4 replies, has 2 voices.

Last updated by michaelR-26 2 months, 4 weeks ago.

Assigned support staff: Luo Yang.

Author
Posts
#1765719

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]

#1765929

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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/

#1767659

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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

#1767785

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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/

#1768413

That worked perfectly!