Conditional population of a dropdown list using relationships
Hi
I have a coding question, if you could please help me out a bit as I could not figure it out.
In my search form I have two drop down lists, “city” and “city_area”. The desired effect is as such that by selecting a certain city from the “city” dropdown list I can have the second dropdown list “city_area” populated with the areas related to the selected city.
I have created two channels:
1) city: this has two fields > {city_name} a text input and {city_area_link} a relationship targeted at the "city_area" channel.
2) city_area: this has one field {city_area_name}, a text input
The output of the above gives the desired effect as standalone, but I am having a hard time incorporating these fields in my search form. Here’s a snippet of the form’s code:
{exp:low_search:form
collection="wellness_centers"
query="{segment_2}"
result_page="directory/filtered-results-wellness-centers"
form_id="search"
search_mode="all"
}
<div id="container">
<div class="row">
<fieldset class="fieldset">
<div class="block">
<select name="{city_name}">
{exp:channel:entries channel="city"}
<option value="{city_name}">{city_name}<option>
{/exp:channel:entries}
</select>
<input type="hidden" name="exact[]" value="{city_name}">
</div>
<div class="block">
<select name="{city_area_name}">
{exp:channel:entries channel="city"}
{city_area_link}
<option value="{city_area_link:city_area_name}>{city_area_link:city_area_name}</option>
{/city_area_link}
{/exp:channel:entries}
</select>
<input type="hidden" name="exact[]" value="{city_area_link:city_area_name}">
</div>
Thank you again.
Merv
Replies
Low 12 Mar 2014 14:49
First of all, what are you targeting with the form? I take it your search results are not City nor City Area entries. But rather, they are Wellness Centers entries. So how are the two former channels related to the latter?
The two selects (of city names and city area names) won't do anything in your given code. They aren't valid filters, based on the name="" attributes (filter params) of those selects.
If you want to filter Wellness Centers based on City Area, and a City Area is a channel related to a Wellness Center using a Relationship (or Playa) field in the Wellness Center channel, you need to use the Relationships filter, targeting that field.
Oh, and if you're using LS3, the collection="" and search_mode="" parameters on the Form tag won't do anything, either.
Merv 12 Mar 2014 16:10
Hi
Many thanks, I will re-think it and try it out.
All the best
Merv
Merv 13 Mar 2014 03:35
Hi,
Before creating the City and City_area channels and testing it, I had the folllowing:
1) Channel: "wellness_centers"
2) Channel fields:all formatted as Text Input and Textarea:
{wc_name}
{wc_service_description}
{wc_street_address}
{wc_area}
{wc_city}
3) Below is the previous form code which although retrieves wc_city and wc_area values but does not provide the desired effect. I thought if I could just put a WHERE clause in the wc_area SELECT statement to only retrieve the areas related to the selected city, then my problem is resolved, but I could not achieve this like one does with PHP variables and SQL.
{exp:low_search:form
collection="wellness_centers"
query="{segment_2}"
result_page="directory/filtered-results-wellness-centers"
form_id="search"
search_mode="all"
}
<div id="container">
<div class="row">
<fieldset class="fieldset">
<div class="block">
<select name="search:wc_city">
<option value="Dubai">Dubai</option>
{exp:query sql="SELECT DISTINCT field_id_62 FROM exp_channel_data WHERE field_id_62 != '' AND field_id_62 !='Dubai' ORDER BY field_id_62 ASC"}
<option value="{field_id_62}">{field_id_62}</option>
{/exp:query}
</select>
<input type="hidden" name="exact[]" value="search:wc_city">
</div>
<div class="block">
<select name="search:wc_area">
<option value="">Any Area</option>
{exp:query sql="SELECT DISTINCT field_id_61 FROM exp_channel_data WHERE field_id_61 != '' ORDER BY field_id_61 ASC"}
<option value="{field_id_61}">{field_id_61}<option>
{/exp:query}
</select>
<input type="hidden" name="exact[]" value="search:wc_area">
</div>
What do you suggest I do in this case ?
Thank you
Merv
Low 13 Mar 2014 07:49
Well, it kind of depends on how you want to structure your data and display it. But for me, it sounds like a case for categories. You could create a Locations category group, use parent categories as cities, and subcategories for areas, and make sure an entry has both a city and area selected.
Then you can create two drop downs: one with parents only, one with both parents and child categories, maybe with optgroups in the latter. With JS, you could then show/hide the right options in the second select element.