Forums

Hi,

First, I want to appologize for my english, I am not a english native but i will do my best to explain myself.

Description:
I have to make 3 drop down list related to each other. First the user picks the country, then the states within that country are shown in the state dropdown, once he picks a state, then the cities within that states are shown in the city dropdown.
I am aware that a thread like this one has been posted before and i used it to create my form.
Here is a link to the thread. http://www.chronoengine.com/forums.html?cont=posts&f=7&t=5798&start=30.

Issue:
The issue i have is that it works for the states, but not for the cities. When a user picks a states it hides the states (again) instead of the city.
I used firebug to try to understand what was going on, and it seems that the second javascript function (change_ville()) that i have create to hide to wrong dropdowns is still pointing to the state div. I guess because both the state div and the city div are of the class 'select'. But i don't know how to make it point to the right div.

Here is my html code

<?php
$user =& JFactory::getUser();
$db =& JFactory::getDBO();
?>


<div class="form_item" >
   <input type='hidden' name='email' value='<?php echo $user->email; ?>' />
   <div class="form_element cf_dropdown">
      <label class="cf_label">Pays de Résidence*:</label>
      <div id ='pays_residence'>
         <select name="country_residence" size="1" id="country_residence" class="cf_inputbox validate-selection" onChange='change_country();'>
         <option value="">--Sélectionner--</option>
         <!--Empty line for ChronoForm required error --!>
<?php //this code permit to use dynamic access to category list
         
      $query= "select id as value, country_name as text from #__user_country order by country_name";
      $db->setQuery($query);
      $result = $db->loadRowList();
      
      foreach($result as $cle => $val): 
        echo "<option value='".$val[0]."'>".$val[1]."</option>";
      endforeach; 
?>
          </select>
       </div>
   <div class="cfclear"> </div>
   </div>
   
<div class="form_item" >
   <div class="form_element cf_dropdown">
      

<label class="cf_label">Région de Résidence*:</label>
<?php
         foreach($result as $cle =>$val):
         echo "<div id='".$val[0]."' class='select' style='display:none;'>";
?>
         <select id ='region_residence' name='region_residence' class='cf_inputbox validate-selection' size='1' onChange='change_ville();' style='width:160px;'>
<?php
           $idcle = $cle + 1;
           $query= "select id as value, state_name as text from #__user_state  
           where countrycode='$val[0]' order by state_name ";
           $db->setQuery($query);
           $subcat_result = $db->loadRowList();
           foreach($subcat_result as $subcat_cle =>$subcat_val):         
           echo "<option value='".$subcat_val[0]."'>".$subcat_val[1]."</option>";
           
               endforeach; 
?>
            </select>

</div>
<?php
        endforeach; 
?> 
        
</div>


<div class="form_item" >
   <div class="form_element cf_dropdown">

<label class="cf_label">Ville de Résidence*:</label>
<?php
         foreach($subcat_result as $subcat_cle =>$subcat_val):
         echo "<div id='".$subcat_val[0]."' class='select' name='essai'  style='display:none;'>";
?>
         <select id ='ville_résidence' name='ville_résidence'  style='width:160px;'>
<?php
           $idcle = $subcat_cle + 1;
           $query= "select id as value, cityname as text from #__user_city
           where regioncode='$subcat_val[0]' order by cityname ";
           $db->setQuery($query);
           $subcat_result = $db->loadObjectList();
           foreach($city_result as $city_cle =>$city_val):         
           echo "<option value='".$city_val->value."'>".$city_val->text."</option>";
           
               endforeach; 
?>
            </select>

</div>
<?php
        endforeach; 
?>         

</div>

Here are the javascript

function change_country()
{
    var country = $('country_residence');
    var selects = $$('div.select');
    for ( var i = 0; i < selects.length; i++ ) {
        if ( selects[i].id == country.value ) {
            selects[i].style.display = 'block';
        } else {
            selects[i].style.display = 'none';
        }
    }
}

function change_ville()
{
    var region = $('region_residence');
    var selects1 = $$('div.select');
    for ( var i = 0; i < selects1.length; i++ ) {
        if ( selects1[i].id == region.value ) {
            selects1[i].style.display = 'block';
        } else {
            selects1[i].style.display = 'none';
        }
    }
}

I will be very grateful if somebody can help me on this as i am new to coding.

Thanks in advance

DOF

Hi DOF.

I think that the problem is in this line

var selects1 = $$('div.select');

It's perfectly good JavaScript but it's not enough. As you say it will return an array of all the <div class='select' . . .

It might be better to use the id's of the div.selects instead $('id') as this will remove the need to scan all the div.selects.

That said the code looks OK from reading it without testing. I don't have the time to rebuidl the form right now.

Bob

PS There's another approach that might be useful. You can't display or hide individual options in a select list but you can display and hide option groups (see an example here. So you could add all the options into the same select inside option groups; add ids to the option groups and use the script to turn them on and off.

Thank you very much for your reply. It is very much appreciated.

I will test it and let you know.

Thanks again

Hi,
I have tried what you've suggested earlier but could not find a way to make it work.
My 'ids' are variable like $val[0], so my issue is that i don't know how to pass them to the javascript. I tried <? echo $var[0] ?>, but does not work.

do you have any advice?

Thanks in advance.

DOF

Hi DOF,

Hard to say without seeing the Form HTML. Its the ids that end up in there that you need to use in your JavaScript.

Bob

Hi Bob,

Many thanks for your reply.
Here is the link to the form so that you can take a look.

http://annonces.keneur.com/index.php?option=com_chronocontact&chronoformname=user_form

I am very desparate to find a solution and you help is very appreciated. Like i said in my first email, when i put the div.select it only works one time, (for the state), but really don`t know how to make it point to the ids since they are also variable.
Would you need me to provide you with anything else?

Thanks
Again

DOF

Hi DOF,

You have JQuery running in the template and that effectively breaks the MooTools code you are using in your form. You must preferably get rid of JQuery at least while you develop and then put it into noConflict mode.

Running the form without the template, FireBug shows a JavaSCript error because you have a bad definition of 'selects'.

Bob

Hi Bob,
I will take out the jquery to avoid the conflit.
I guess what you saw is the code when i was trying to make it work with the ids.$(id) for both region and city. I have put it back to what it was before with state only working so that you can see.

Thanks

Is it the only way to avoid the conflict??