Problems, need help? Have a tip or advice? Post it here.
8 posts Page 1 of 1
Hello All!

I am making a form in which i have two fields (dropdowns) for:
1. State
2. City

I want to do the following:
1. The State list will be dynamic
2. City List will be dynamic
(I am refering viewtopic.php?f=4&t=10316#p25126 for the dynamic lists)
3. When a state is selected, The cities corresponding the state should be populated into the City Dropdown.
4. Till the state is not selected, the City Dropdown should be disabled or blank.

How can this be done?

Regards,
Aashish
Image
where innovation meets technology
Greatly depends on HTML that you are using. This can be a way http://www.jquery-steps.com/Examples
CouchCMS-wise, there must be established a certain relation between states and cities. Do you want them to be editable from the backend?
Ya they need to be editable from the backend...
They are going to be on the same page. So the link you shared is not exactly what i am looking for.

It should be like:
1. State (Prefetched Values of State) | City (All Blank or Disabled)
2. State (Once a State is selected) | City (Values of that cities belonging to that state shall be populated in the dropdown)

State and city will be dropdowns only.
Image
where innovation meets technology
I think it can be solved with the help of 2 templates with relation and a multi-value variable concept. However CouchCMS steps in to convert a working html+js sample. If you don't have it yet, following google request might help:
Populate dropdown list based on selection in another dropdown

There are some ready-made samples which you can adapt to your use-case and once you have finalized the design, post the template and we'll look into adding the cms part.
http://jsfiddle.net/k148pk76/1/
https://stackoverflow.com/a/30316338
http://jsfiddle.net/fgdxcgx3/3/
@Trendoman:

I am using the code you gave on link: JsFiddle

This is where i stand right now, I have used the dynamic folders concept, but am open to changes.
Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
   <cms:template name='s_c' title="State and City List" order='1000' dynamic_folders='1' clonable='1' />
   
   <link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css" />
   <link rel="stylesheet" href="assets/css/genxcoders.css" type="text/css" />
   
   <div class="ptop-50"></div>
   
   <div class="container">
      <div class="row">
         <!-- Dropdown State -->
         <div class="col-md-3">
            <select class="dealer-form" name="meal" id="meal" onChange="changecat(this.value);">
               <option value="" disabled selected>Select State</option>
               <cms:folders depth='1'>
               <option value="<cms:show k_folder_name />"><cms:show k_folder_title /></option>
               </cms:folders>
            </select>
         </div>
         <!-- Dropdown State -->
         
         <!-- Dropdown City -->
         <div class="col-md-3">
            <select class="dealer-form circles" name="category">
               <option value="" disabled selected>Select City</option>
            </select>
         </div>
         <!-- Dropdown City -->
      </div>
   </div>
   
   <!-- Script -->
   <script src="https://code.jquery.com/jquery-2.0.0.js" integrity="sha256-iW43nTNM8LFseNmWKhV5FHFW1KcjVQMvzg3l9nPU4oc=" crossorigin="anonymous"></script>
    <script src="assets/js/bootstrap.min.js"></script>
   <script>
      var mealsByCategory = {<cms:set state_count='0' scope='global' /><cms:folders depth='1'>"<cms:show k_folder_title />":[<cms:set city_count='0' scope='global' /><cms:folders childof=k_folder_name >"<cms:show k_folder_title />"<cms:incr city_count /><cms:if city_count!=k_total_folders >, </cms:if></cms:folders>]<cms:incr state_count /><cms:if state_count!=k_total_folders >, </cms:if></cms:folders>}

      function changecat(value) {
         if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>";
         else {
            var catOptions = "";
            <cms:folders depth='1'>
               <cms:folders childof=k_folder_name>catOptions += "<option><cms:show k_folder_title /></option>";</cms:folders>
            </cms:folders>
            document.getElementById("category").innerHTML = catOptions;
         }
      }
   </script>
   <!-- Script -->
   
<?php COUCH::invoke(); ?>


Now i understand that getElementById takes only one argument, and that is where i am stuck.
Image
where innovation meets technology
Somehow HTML and JS code are different from JSFiddle. Id is missing and a 'for' loop in JS is also missing.
Revert the changes, make a static working sample and start over. Make sure nothing is cut off while adding couch tags in place of static data.
<select name="category" id="category">


You may also try alternative solutions (Dependent option trees):
http://www.alpacajs.org/docs/api/condit ... ncies.html + http://www.alpacajs.org/docs/fields/optiontree.html and more samples of the same here http://demo.interface.club/limitless/la ... anced.html
This is the code for <select>:
Code: Select all
<select name="meal" id="meal" onChange="changecat(this.value);">
    <option value="" disabled selected>Select</option>
    <cms:folders masterpage='dropdownpopulate/Example1.php' hierarchial='1' depth='1'>
    <option value="<cms:show k_folder_name />"><cms:show k_folder_title /></option>
    </cms:folders>
</select>
<select name="category" id="category">
    <option value="" disabled selected>Select</option>
</select>


This is the JS:
Code: Select all
<cms:set state_count='0' scope='global' />
         <cms:set city_count='0' scope='global' />
         var mealsByCategory = {
            <cms:folders hierarchial='1' depth='1'>
            "<cms:show k_folder_title />": [<cms:folders childof=k_folder_name>"<cms:show k_folder_title />"<cms:incr city_count /><cms:if city_count!=k_total_folders>,</cms:if></cms:folders>]<cms:incr state_count /><cms:if state_count!=k_total_folders>,</cms:if>
            </cms:folders>            
         }
         
         function changecat(value) {
            if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>";
            else {
               var catOptions = "";
               for (categoryId in mealsByCategory[value]) {
                  <cms:folders hierarchial='1' depth='1'>
                  <cms:folders childof=k_folder_name>
                  catOptions += "<option>" + mealsByCategory[<cms:show k_folder_name />][<cms:show k_folder_id />] + "</option>";
                  </cms:folders>
                  </cms:folders>
               }
               document.getElementById("category").innerHTML = catOptions;
            }
         }
Image
where innovation meets technology
Got the code to execute!

The HTML was:
Code: Select all
<select name="meal" id="meal" onChange="changecat(this.value);">
    <option value="" disabled selected>Select</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>
<select name="category" id="category">
    <option value="" disabled selected>Select</option>
</select>


The JS was:
Code: Select all
var mealsByCategory = {
    A: ["Soup", "Juice", "Tea", "Others"],
    B: ["Soup", "Juice", "Water", "Others"],
    C: ["Soup", "Juice", "Coffee", "Tea", "Others"]
}

function changecat(value) {
    if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>";
    else {
        var catOptions = "";
        for (categoryId in mealsByCategory[value]) {
            catOptions += "<option>" + mealsByCategory[value][categoryId] + "</option>";
       }
       document.getElementById("category").innerHTML = catOptions;
}


Couchified HTML is:
Code: Select all
<select name="meal" id="meal" onChange="changecat(this.value);">
    <option value="" disabled selected>Select</option>
    <cms:folders masterpage='dropdownpopulate/Example1.php' hierarchial='1' depth='1'>
    <option value="<cms:show k_folder_name />"><cms:show k_folder_title /></option>
    </cms:folders>
</select>
<select name="category" id="category">
    <option value="" disabled selected>Select</option>
</select>


The Couchified JS is:
Code: Select all
var mealsByCategory = {
    <cms:set state_count='0' scope='global' />
    <cms:folders masterpage="dropdownpopulate/Example1.php" hierarchial='1' depth='1'>
    "<cms:show k_folder_name />":
    [
        <cms:set city_count='0' scope='global' />
        <cms:folders masterpage="dropdownpopulate/Example1.php" childof=k_folder_name>
            "<cms:show k_folder_title />"<cms:incr city_count /><cms:if city_count!=k_total_folders>,</cms:if>
        </cms:folders>
    ]<cms:incr state_count /><cms:if state_count!=k_total_folders>,</cms:if></cms:folders>
}
         
function changecat(value) {
    if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>";
    else {
        var catOptions = "";
        for (categoryId in mealsByCategory[value]) {
            catOptions += "<option>" + mealsByCategory[value][categoryId] + "</option>";
    }
    document.getElementById("category").innerHTML = catOptions; }
}


Hope this comes in handy for someone




EDIT #1:

I was working with having the chained dropdown work to select a state and its respective city in a DBF, where the State and City fields are relational fields. For directly saving the selected values in the select tag, we need to pass the k_page_id, which was not possible with the original HTML code. So I made the following changes in the code (JS, especially) and below is the working example:

HTML Code:
Code: Select all
<label for="news_location" class="gxcpl-body-2">
    <strong>State</strong>
</label>
<cms:hide>
    <cms:input name="news_location" type="bound" />
</cms:hide>
<select name="f_news_location" id="meal" onChange="changecat(this.value);">
    <option value="" disabled selected>Select State</option>
    <cms:pages masterpage='admin/support-files/state.php' order="asc" orderby="page_title">
        <option value="<cms:show k_page_id />"><cms:show k_page_title /></option>
    </cms:pages>
</select>

<label for="news_location_city" class="gxcpl-body-2">
    <strong>City</strong>
</label>
<cms:hide>
    <cms:input name="news_location_city" type="bound" />
</cms:hide>
<select name="f_news_location_city" id="category" >
    <option value="-" >Select State First</option>
</select>


JS Code:
Code: Select all
var mealsByCategory = {
    <cms:pages masterpage="admin/support-files/state.php" order="asc" orderby="page_title">
        <cms:set my_state_name = "<cms:show k_page_name />" scope="global" />
        "<cms:show k_page_id />":
        [
            <cms:pages masterpage="admin/support-files/state-city.php" custom_field="state_name=<cms:show my_state_name />" order='asc' orderby='page_title'>
                "<option value='<cms:show k_page_id />'><cms:show city_name /></option>"<cms:if "<cms:not k_paginated_bottom />">,</cms:if>
            </cms:pages>
        ]<cms:if "<cms:not k_paginated_bottom />">,</cms:if>
    </cms:pages>
}
function changecat(value) {
    if (value.length == 0) {
        document.getElementById("category").innerHTML = "";
    } else {
        var catOptions = "<option value='' selected>Select City</option>";
        for (categoryId in mealsByCategory[value]) {
            catOptions += mealsByCategory[value][categoryId];
        }
        document.getElementById("category").innerHTML = catOptions;
    }
}
Image
where innovation meets technology
8 posts Page 1 of 1
cron