[Resolved] CRED dropdown conditional display of taxonomy terms based on custom field value

[Author]

Posts

[alinaB]

In a CRED form, I need to display a specific taxonomy based on another previously chosen taxonomy. I can arrive at this end by using two paths, which I do not know how to follow from the Toolset syntax point of view.

1. In a CRED form dropdown taxonomy selection, is it possible to display only specific terms (handpicked by their IDs)?
2. In a CRED form dropdown taxonomy selection, is it possible to display ONLY the taxonomies that have, say, a custom term field with the value 'X'?

My global problem is the following: I have a list of districts (taxonomy: district) and a list of cities (taxonomy: city).
What I want to achieve: when I select a district from a dropdown, the next dropdown should be populated only by the cities within that district. My possible theoretical solutions are:

1. By using conditional display, depending on the selected district, the cities dropdown will be populated with handpicked cities (by IDs or by names).
2. By using conditional display, depending on the selected district (say B), only cities having the precise custom term field BB (defined manually for each city) to be displayed in the next dropdown.

Personally, I prefer to go with number 2, since in time, more cities will be added, and I do not want to go each time to change the CRED form.

Here is what I have achieved until now:

<div class="form-group">
<label>District</label>
[cred_field field='district' force_type='taxonomy' single_select='true' display='select' output='bootstrap' class='form-control']
</div>

[cred_show_group if="($(district) eq '12')" mode="fade-slide"]
<div class="form-group">
<label>City</label>
[cred_field field='city' force_type='taxonomy' output='bootstrap' display='select' single_select='true']
</div>
[/cred_show_group]

In the second div, how can I tell Toolset to show in the dropdown ONLY some cities? In this moment, it shows them all. A stupid solution would be to define, for each district, a separate taxonomy for its cities, say district1_cities, district2_cities and so on, but I guess this is not the optimal way to go.

Any help would be appreciated. My theoretical solutions are different from what other Toolset users were offered within this forum, and I strongly believe that there is a way to implement them.

[Nigel]

Hi Alina

The answer to questions 1) and 2) are both no.

There are no options to limit the terms that are included in a taxonomy field in a form, all terms are included.

What's more, what you want is a little more complex, because you want reactive selectors, where the options available in a second dropdown change according to what is selected in the first. There is a form of support for this in Views front-end query filters, but nothing like it for forms.

The only way to achieve something like this is to use JavaScript (or jQuery) to update the second select dropdown when the first changes.

The key to making this work is that you need to add some PHP to the relevant page that produces a multi-dimensional array that represents the relationship between the two fields, and then you pass that array to the front end as a JSON object so that it is available to JavaScript, for which you use the function wp_localize_script (https://developer.wordpress.org/reference/functions/wp_localize_script/, tutorial: hidden link).

You can then use that JSON object to generate the select option values and manipulate them as required when one of the select dropdowns changes.

It's not trivial. I can't write the code for you, but if you want to try and get stuck I'll be happy to look at what you've done, otherwise you may need to recruit a developer to help you (e.g. toolset.com/contractors/).

[alinaB]

Hello, Nigel, and thank you for your clear answer. I have understood that my paths go dangerously complicate.

Meanwhile, I have found another path, based on Views, but I still get stuck at some point. I get what I need, but I cannot isolate it.

1. I have defined a view (only for testing purposes, if this method works I will have to define ~40) that lists the cities having the value of the custom taxonomy field equal to 'b' (from the district name, letter is not relevant).
2. I have built a view -- named testb -- that displays all taxonomy terms satisfying this restriction (wpcf-citys-district is a string equal to b). Its output is set to [wpv-layout-meta-html].
3. I have inserted a cred_generic_form as follows

[cred_show_group if="($(district) eq '12')" mode="fade-slide"] // here '12' is the ID of one city
<div class="form-group">
<label>City</label>
[cred_generic_field field="city" type="select" class="" urlparam=""]
{
"required":1,
"validate_format":0,
"persist":1,
"default":[],
"options":[ [wpv-view name='testb'] ]
}
[/cred_generic_field]
</div>
[/cred_show_group]

The problem I encounter is that the query results are in the following form:

Array
(
[0] => WP_Term Object
(
[term_id] => 195
[name] => City 1
[slug] => city-1
[term_group] => 0
[term_taxonomy_id] => 195
[taxonomy] => city
[description] =>
[parent] => 0
[count] => 0
[filter] => raw
)
[1] => WP_Term Object
(
[term_id] => 196
[name] => City 2
[slug] => city-2
[term_group] => 0
[term_taxonomy_id] => 195
[taxonomy] => city
[description] =>
[parent] => 0
[count] => 0
[filter] => raw
)
/* and so on */
)

Now ALL I NEED is to extract somehow the value of the [name] fields from the array above...

Would it be possible?

I am no master of JavaScript, but I would go that way if no other choice is revealed.

[alinaB]

And no, I am not trying to populate the second drop down based on the first one -- this one was already achieved. What I have is a list of possible predefined dropdowns, each containing the cities for each district. So basically my question resumed to: is it possible, in a CRED form, to diaplay in a dropdown selector, only some taxonomies? (either picked by hand or selected based on a custom field value).

[Nigel]

So your plan is to include inputs for the same field perhaps as many as 40 times, and hide 39 of them—although the markup will be there for all of them in the page, but they will be mostly hidden—showing only one of the select inputs with a limited number of options according to what is selected in the first dropdown?

That's a very hacky solution, for sure.

The answer to the questions about inserting a taxonomy field with only limited options is still no, and the problem with your proposed solution—to use a generic select field dynamically populated—is that such generic fields would be saved as custom fields, not as taxonomies.

For your information, you can use a View to provide the options for a generic field provided your View outputs the options in the required JSON format. I answered a question about that earlier today, you can see what's involved here: https://toolset.com/forums/topic/i-need-to-create-a-select-field-with-a-list-of-post/#post-1437723

But, as I say, that doesn't add a taxonomy term.

You would need to then also use the Forms API, e.g. the cred_save_data hook, to manually set the taxonomy terms based upon the submitted value of the generic field, using a function such as wp_set_post_terms.

https://toolset.com/documentation/programmer-reference/cred-api/#cred_save_data
https://developer.wordpress.org/reference/functions/wp_set_post_terms/

[alinaB]

Well, no solution (in the way I was seeing it) is still a solution -- I will have to try other approaches.

Thank you very much for your time and your clear explanations!

[alinaB]

My issue is resolved now. Thank you!

[alinaB]

I will leave my solution here, for future reference.

1. I have created a taxonomy named 'Districts', having terms District_1, District_2 ... District_n.
2. I have created a hierarchical taxonomy named 'Cities', having the structure:
parent: D1
- child: City_1_1
- child: City_1_2
[...]
parent: D2
- child: City_2_1
- child: City_2_2
[...]
etc

The following is done by hand, unfortunately, since there is no programmatic way to do that automatically. Fortunately, it is a small country. I have created several Views that show the children of Dn, and I will show them conditionally in the CRED form as follows:

In the CRED form, I have one dropdown form field that allows the user to select the district, say District_4. Conditionally, depending on what district he has chosen, the next CRED field will be a dropdown select where he can pick ONLY the children of D_4, namely City_4_1, City_4_2 etc.

Unfortunately, I did not find a solution yet to hide the parent taxonomy Dn in the second dropdown select, but I fell there is a way to do that. I have tried the solutions presented here, on this forum, but none of them worked. I will dig further and, if I do not manage, I will open another ticket.

Thanks again, Nigel, for stopping me from doing crazy stuff, like loading 40 times the same markup on the same page.

[alinaB]

My issue is now resolved now. Thank you!

[alinaB]

I leave the solution here for anyone dropping by that needs to do something similar.
Problem: with a cred post form, I want to add taxonomies with three distinct fields, as follows:
First field, drop-down select the country from a predefined list.
Second field: shows up after field 1 has a country selected, and it displays the subdivisions of that country (in my case, they are the departments/districts of Romania, including the capital).
Third field shows up only if second field has a choice, and lists the cities/main localities within that district.

All fields (districts, localities per district) are defined as custom fields of the post type in discussion, all mandatory in my case.

With custom code by using the hook cred_save_data, I transfer the values of these fields to taxonomy terms. In case those taxonomy terms do not exist, they are created and have the same values as the custom fields.

It takes a while to do such intricate custom fields logic, but in the end it is worth: if you add a new city/village in its group and one user selects it when he posts his stuff, it will become a new taxonomy term of the associated taxonomy.