Forums

Second dropdown depending on the first dropdown selection

wayward 06 Jan, 2009
Hi all,

I want to make something with Chronoforms but I am not sure if this is possible, that' s why I am trying to get an answer in this forum (I did search already but could not find an answer to my question). Oke, what do I want? Well, I have made a DropDown with 3 options in it. When somebody clicks on one of those options I want it to show another (new) DropDown with 5 options (dates). So if someone chooses option 1 in the first DropDown it should show 5 dates in the new DropDown, but when someone clicks on option 2 in the first DropDown it should show other dates then when he chooses option 1. I hope explained I it well enough in English..🙄

To make it a bit more understandable I'll try to explain it a bit more with an example:

DropDown1
> option 1 (when someone clicks this option it should show a new DropDown with the dates January 8, 9, 10, 11 and 12)
> option 2 (when someone clicks this option it should show a new DropDown with the dates February 23, 24, 25, 26 and 27)
> option 3 (when someone clicks this option it should show a new DropDown with the dates March 11, 12, 13, 14 and 15)

Lets say I clicked in the above DropDown on option 1, then it should show in the second DropDown the following options:

DropDown2
> January 8
> January 9
> January 10
> January 11
> January 12

When I would have clicked the second option in the first dropdown, it should show in the second dropdown the following options:

DropDown2
> February 23
> February 24
> February 25
> February 26
> February 27

I hope someone can tell me if this is possible with Chroneforms, and if so I hope someone can explain me how to do this. Thanks already for taking the time to read this.🙂
wayward 08 Jan, 2009

Hi wayward,

Please see this thread which has something similar.

Bob


Hello Bob,

First of all, thank you for your answer, it is realy nice to see such an active support over here🙂

I have checked out the topic you referred me to, I copied and pasted the code you posted in this post. I went to my form and then to the tab called Form Code and pasted the demonstration form you mentioned in that post. I copied the html code and the javascript code in there, but when I published the form and took a look at what the script would do, it didn't work. There are 2 dropdowns showing but when I change the country I still keep the same states (USA states), so to me it seems like the javascript is not working? I also used Firebug (firefox add-on) in the hope to detect the problem/typo. When I select a country it detects the following (see image):



Maybe that is why the states are not changing for me? Or maybe I am doing something else wrong? However, I don't know anything about javascript😟 So I was hoping you (Bob), or someone else would be so nice have a look at the live site? The form can be found here. I have not changed anything in the html- or javascript code, if you need any more information, please let me know. Thanks in advance🙂
GreyHead 08 Jan, 2009
Hi wayward,

The script uses the MooTools library which is typically loaded by default in Joomla 1.5 but isn't loaded on your page. I think that if you set Form Validation on and select the MooTools library all should be well.

Bob
wayward 08 Jan, 2009
Hello Bob,

Thank you very much for your help. I did exactly what you told me to do; I turned on Form Validation and selected the MooTools Library. Now the dropdown effect is working the way I want it to😀 I am not sure though why the MooTools library isn't loading on my page by default, i'll try to find out how to turn it on/how to get it loaded by default (I am using Joomla 1.5) later on. Anyway, first I am going to change the html a bit so the dropdowns will show the information I want it to show😉

Once again, thank you very much🤔 You give wonderful support!
wayward 12 Jan, 2009
Hi again,

I have two more question which I hope someone can help me with. I have already been trying to fix this problem for about 3 days, but I just can't seem to find where I am going wrong. So I really hope someone can help me on my way....

I have used the country/state dropdown example in my form and that seems to be working correctly, the form can be found here. But somehow I can't get the correct results send to my e-mail. In my e-mails template I have the following (dropdowns): {state_list} and {country_list} ...but the "state_list" is always giving the same output (output = 'Op aanvraag2') when I receive the e-mail. It seems to send me the last 'option value' from my 'div id='training5'', but of course I want it to show one of the dates selected (in the second dropdown) instead of always showing the last option value. I guess it has something to do with the fact that the second dropdown is depending on the selection of the the first dropdown? Btw, I have changed the HTML but have not changed the javascript. Here is my form HTML code:
HTML code removed by topic starter, reason; too many faults in the code.
Another problem is that my layout is not showing the way I want it to. The right side (column) of my site is now showing below the form, I want it to be on the right side like on all other pages. So I guess I have done something wrong. I have already tried to set the "Load Chronoforms CSS/JS Files?" option to NO, but still I am having troubles with my design. So I guess the problem is not only within the CSS files but also in my HTML, I have the same problem with the right column in this form. I have been trying to solve this problem during the last 3-4 days but so far without luck😟

Can anyone please help me on my way? If you need anymore information, please let me know. Thanks for taking the time reading this.
GreyHead 12 Jan, 2009
Hi wayward,

I'll take a look at the JavaScript problem later this evening.

I'm fairly certain that the misalignment - which is fairly common with ChronoForms and some templates - comes from the <div class='clear'> </div> elements that are used to clear the floats. If one of these is misplaced, or if there is an extra unmatched <div> or </div> in the form html you can get this result.

The other possibility a 'width' that is too big and forces the column down but I don't see this.

The only answer that I know of is a very careful line by line check through the form html until you find exactly what the problem is. One technique that I've used is to comment out all of the html with <!-- --> then uncomment block by block to see what happens.

Bob
wayward 13 Jan, 2009
Hi Bob,

Thank you for your answer. I have followed your advice to comment out all of the html, it took me some time but I think all HTML is fine now.🙂 I have also solved the problem with the misalignment: I changed the width information of the container in the css files. Instead of a fixed width of 800px I changed it to 'auto', that seems to work for both Firefox 3 and IE7 (have not tested other browsers/versions)😀 So the only problem left is the one with the dropdown/javascript. I will paste the dropdown html code and javascript below:

html
<div class="form_item"><div class="form_element cf_dropdown"><div id='country'>
    <select id='country_list' name='country_list' style='width:350px;' onChange='change_country();' >
    <option value='training1' selected='selected' >1. Finance en IT - Foundation</option>
    <option value='training2'>2. Finance en IT - Practitioner Servicemanagement</option>
    <option value='training3'>3. Finance en IT - Practitioner Projectmanagement</option>
    <option value='training4'>4. Opdrachtgeverschap voor IT-projecten</option>
    <option value='training5'>5. InCompany (van hierboven genoemde trainingen)</option>
  </select>
  </div></div></div>
<br>
<div class="form_item"><div class="form_element cf_dropdown">
<div id='training1' class='select' style='display:block;' >
    <select id='state_list' name='state_list' style='width:350px;' >
    <option value='Vrijdag 13 februari 2009'>Vrijdag 13 februari 2009</option>
    <option value='Vrijdag 10 april 2009'>Vrijdag 10 april 2009</option>
    <option value='Vrijdag 12 juni 2009'>Vrijdag 12 juni 2009</option>
    <option value='Vrijdag 14 augustus 2009'>Vrijdag 14 augustus 2009</option>
    <option value='Vrijdag 09 oktober 2009'>Vrijdag 09 oktober 2009</option>
    <option value='Vrijdag 11 december 2009'>Vrijdag 11 december 2009</option>
  </select>
  </div></div></div>

<div class="form_item"><div class="form_element cf_dropdown">
<div id='training2'  class='select' style='display:none;' >
    <select id='state_list' name='state_list' style='width:350px;' >
     <option value='Vrijdag 20 februari 2009'>Vrijdag 20 februari 2009</option>
     <option value='Vrijdag 19 juni 2009'>Vrijdag 19 juni 2009</option>
     <option value='Vrijdag 16 oktober 2009'>Vrijdag 16 oktober 2009</option>
  </select>
  </div></div></div>

<div class="form_item"><div class="form_element cf_dropdown">
<div id='training3'  class='select' style='display:none;' >
    <select id='state_list' name='state_list' style='width:350px;' >
     <option value='Vrijdag 17 april 2009'>Vrijdag 17 april 2009</option>
     <option value='Vrijdag 21 augustus 2009'>Vrijdag 21 augustus 2009</option>
     <option value='Vrijdag 18 december 2009'>Vrijdag 18 december 2009</option>
  </select>
  </div></div></div>

<div class="form_item"><div class="form_element cf_dropdown">
<div id='training4'  class='select' style='display:none;' >
    <select id='state_list' name='state_list' style='width:350px;' >
        <option value='Op aanvraag1'>Op aanvraag1</option>
  </select>
  </div></div></div>

<div class="form_item"><div class="form_element cf_dropdown">
<div id='training5'  class='select' style='display:none;' >
    <select id='state_list' name='state_list' style='width:350px;' >
        <option value='Op aanvraag2'>Op aanvraag2</option>
  </select>
  </div></div></div>

javascript
    function change_country()
    {
        var country = $('country_list');
        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';
            }
        }
    }

In my E-mails Templates I ask the form to e-mail me the following information: {state_list}. All the way down the html code you will see <option value='Op aanvraag2'>Op aanvraag2</option> that is the option that is sent to me within the email after submitting the form. Of course I want it to send me the selected option and not always the option 'Op aanvraag2'😉

Any idea? Or maybe you can copy and past the html + javascript in a testform for me to see if it works on your side?

Thanks for the wonderful support🤔
GreyHead 14 Jan, 2009
Hi wayward,

You're absolutely correct - the JavaScript doesn't work - I think we tested the original for displaying info on the page for which it was OK.

I'll take another look later - a first experiment with disabling the unused blocks doesn't seem to work as I expected :-(

Bob
wayward 18 Jan, 2009
Hi again,

The same thing is happening with the 'mexico/canada' solution posted in the ShowCase part of this forum; the javascript shows the information in the second dropdown but no mather wich selection is made in the second dropdown, it will always e-mails the same option....

This means that for showing purposes the dropdown works ok, but most of the time I think the second dropdown it there to get more information? The first dropdown selection works perfect but I would also like to be e-mailed the selection made in the second dropdown. Did you, Bob, perhaps have had time yet to look into this? Or does anyone else know how to do this/get this working?

Cheers
GreyHead 19 Jan, 2009
Hi wayward,

Try this version - it requires putting the options list into the JavaScript (not very elegant but this could be automated with a bit of PHP).
<div class="form_item">
    <div class="form_element cf_dropdown">
        <select id='first_list' name='first_list' style='width:350px;' onChange='change_country();' >
            <option value='training1' selected='selected' >1. Finance en IT - Foundation</option>
            <option value='training2'>2. Finance en IT - Practitioner Servicemanagement</option>
            <option value='training3'>3. Finance en IT - Practitioner Projectmanagement</option>
            <option value='training4'>4. Opdrachtgeverschap voor IT-projecten</option>
            <option value='training5'>5. InCompany (van hierboven genoemde trainingen)</option>
        </select>
    </div>
</div>
<div class="form_item">
    <div class="form_element cf_dropdown">
        <select id='second_list' name='second_list' style='width:350px;' >
            <option value='Vrijdag 13 februari 2009'>Vrijdag 13 februari 2009</option>
            <option value='Vrijdag 10 april 2009'>Vrijdag 10 april 2009</option>
            <option value='Vrijdag 12 juni 2009'>Vrijdag 12 juni 2009</option>
            <option value='Vrijdag 14 augustus 2009'>Vrijdag 14 augustus 2009</option>
            <option value='Vrijdag 09 oktober 2009'>Vrijdag 09 oktober 2009</option>
            <option value='Vrijdag 11 december 2009'>Vrijdag 11 december 2009</option>
      </select>

    </div>
</div>
<input type='submit' name='submit' value='Submit' />

and JavaScript
var options_array = new Array();
options_array['training1'] = new Array('Vrijdag 13 februari 2009', 'Vrijdag 10 april 2009', 'Vrijdag 12 juni 2009', 'Vrijdag 14 augustus 2009', 'Vrijdag 09 oktober 2009', 'Vrijdag 11 december 2009'); 
options_array['training2'] = new Array('Vrijdag 20 februari 2009', 'Vrijdag 19 juni 2009', 'Vrijdag 16 oktober 2009');   
options_array['training3'] = new Array('Vrijdag 17 april 2009', 'Vrijdag 21 augustus 2009', 'Vrijdag 18 december 2009'); 
options_array['training4'] = new Array('Op aanvraag1');   
options_array['training5'] = new Array('Op aanvraag2'); 
function change_country()
{
    var first = $('first_list').value;
    var options = options_array[first];
    var second = $('second_list');
    second.length = 0;
    for ( var i = 0; i < options.length; i++ ) {
        second.options.length++;
        second.options[i] = new Option(options[i], options[i]);
    }
}

The options arrays are named after the values in the first list e.g. 'training1'

Bob
wayward 05 Feb, 2009
Thanks a lot Bob. You give wonderful support here in the chronoengine forum! The dropdown is working perfectly now, thanks to your code🙂 Do you perhaps also know why the second dropdown is not republishing (after submitting a wrong verification code)? When the form reloads the second dropdown will simply show you the options you start with before making a selection in the first dropdown. Is it possible to change this? Because now someone can select option 2 in the first dropdown and then have the wrong options in the second dropdown after republishing...
GreyHead 05 Feb, 2009
Hi wayward,

The short answer is that you need to set the JavaScript function to run on page load. How to do that isn't hard but I foget the code right now - I'll try to work it out later.

Bob
Max_admin 05 Feb, 2009
Hi wayward,

there is a Javascript onLoad event (google onload js event) you can use it to select some value from the first dropdown and then use this to select or load some data in the 2nd dropdwon, you will use pieces of Bob's code with very few changes!

Regards
Max
Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
GreyHead 06 Feb, 2009
Hi wayward,

I think that this - or something like it will do the job - provided that you are loading the MooTools library:
window.addEvent('domready', function() {
    var options_array = new Array();
    options_array['training1'] = new Array('Vrijdag 13 februari 2009', 'Vrijdag 10 april 2009', 'Vrijdag 12 juni 2009', 'Vrijdag 14 augustus 2009', 'Vrijdag 09 oktober 2009', 'Vrijdag 11 december 2009');
    options_array['training2'] = new Array('Vrijdag 20 februari 2009', 'Vrijdag 19 juni 2009', 'Vrijdag 16 oktober 2009');   
    options_array['training3'] = new Array('Vrijdag 17 april 2009', 'Vrijdag 21 augustus 2009', 'Vrijdag 18 december 2009');
    options_array['training4'] = new Array('Op aanvraag1');   
    options_array['training5'] = new Array('Op aanvraag2');
    change_country();

    function change_country()
    {
        var first = $('first_list').value;
        var options = options_array[first];
        var second = $('second_list');
        second.length = 0;
        for ( var i = 0; i < options.length; i++ ) {
            second.options.length++;
            second.options[i] = new Option(options[i], options[i]);
        }
    }
});

Bob
wayward 06 Feb, 2009
Thank you for the fast reply and help Bob, it is much appreciated🙂 I just tried your new javacode, but it doesn't seem to work -it makes the second dropdown empty- I am not sure why though.... on the Validation tab the Validation Library is set to load the MooTools library. Earlier in this topic you mentioned the following: "the script uses the MooTools library which is typically loaded by default in Joomla 1.5 but isn't loaded on your page." Maybe this could be the problem? If so, could you tell me where I can find information on how to load the MooTools library by default? (I couldn't find anything about this in the joomla documentation)

The code that I am using at the moment is the following:
    var options_array = new Array();
    options_array['1. Finance en IT - Foundation'] = new Array('Vrijdag 13 februari 2009', 'Vrijdag 10 april 2009', 'Vrijdag 12 juni 2009', 'Vrijdag 14 augustus 2009', 'Vrijdag 09 oktober 2009', 'Vrijdag 11 december 2009');
    options_array['Finance en IT - Practitioner Servicemanagement'] = new Array('Vrijdag 20 februari 2009', 'Vrijdag 19 juni 2009', 'Vrijdag 16 oktober 2009');   
    options_array['Finance en IT - Practitioner Projectmanagement'] = new Array('Vrijdag 17 april 2009', 'Vrijdag 21 augustus 2009', 'Vrijdag 18 december 2009');
    options_array['Opdrachtgeverschap voor IT-projecten'] = new Array('Op aanvraag');   
    options_array['InCompany'] = new Array('Op aanvraag');
    function change_country()
    {
        var first = $('first_list').value;
        var options = options_array[first];
        var second = $('second_list');
        second.length = 0;
        for ( var i = 0; i < options.length; i++ ) {
            second.options.length++;
            second.options[i] = new Option(options[i], options[i]);
        }
    }
That code (note: I changed the option array names, instead of training1, training2 et cetera) is working, except for the republishing of the second dropdown. So I tried the new code you posted, without success. I also tried to edit my (above) code by using the new code you provided. First I thought that the problem with the new code might be with the:
change_country();
and the
function change_country()
code, or the
});
code. But when I tried to edit those lines it did not help me either.

Then I tried firebug to determine the problem, it gives me the following error:



But that doesn't help me much further either because I have no knowledge of javascript at all😢 Sorry for the long post, I wanted to make sure you have all the information needed to help me. I really hope you don't mind me asking you all these questions and taking up so much of your time but do you have any idea what is going wrong? 😶 I feel like we are only 1 step away from having the form working perfectly....

Oce again, thank you very much for your time and effort.
GreyHead 07 Feb, 2009
Hi wayward,

All the links to your forms seem to be dead now - please can you post a current one.

Bob
wayward 30 Mar, 2009
Some time has past now but no solution yet, any ideas left?🙂
Max_admin 30 Mar, 2009
Hi wayward,

I'm doing all the support here alone this week so I may not be very helpful with coding problems, whats the issue you have now ? did you try Google ? or mootools forums ? I got many answers from mootools forums before! its read only but there is a huge number of topics with solutions!

Max
Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
wayward 02 Apr, 2009
Hello Max,

Thank you for replying so fast, you must be busy doing all the support over here by yourself at the moment. I think this is going to be a long post again, sorry for that but I want to be sure all the needed information is provided... Oke, here it goes...😉

I am still having the same issue as in my post on feb 5th: the second dropdown is not republishing upon reload. When the form reloads (for example when one puts in the wrong verification code) the form needs to republish, this is working except for the second dropdown wich will simply show you the options you start with before making any selection in the first dropdown. But I also want the second dropdown to republish/remember what was selected, otherwise when they resubmit the form, the wrong data is showing up!

I have searched the http://forum.mootools.net/ forums but could not find a solution. You also told me that there is a Javascript onLoad event, I did some searches on google for this but it did not help me further because my knowledge of javascript is about zero... Bob told me that the JavaScript function needs to run on page load, he gave me a code but that did not work with my form. Earlier in this topic Bob also mentioned the following: "the script uses the MooTools library which is typically loaded by default in Joomla 1.5 but isn't loaded on your page." Maybe this is part of the problem🤨 Could you Max, or Bob, tell me where I can find information on how to load the MooTools library by default? (I couldn't find anything about this in the joomla documentation).

The form I am talking about can be found here: http://www.icensus.nl/index.php?option=com_chronocontact&chronoformname=aanmeldformulier_trainingen
When filling out the form you will see that when you put in the wrong verification code the second dropdown is not republished correctly. If anymore information (like the form code or js code) is needed, let me know and I will post the code.

Thanks again for the time and effort🤔🤔
GreyHead 02 Apr, 2009
Hi wayward,

Mootools is loading OK in both versions of the form so that's OK. And I'm back from my trip so answering some questions here again.

The problem with the re-load is that the second drop-down is only re-written when the first one changes and it doesn't change on a page re-load so we have to look at how else to trigger the 'change_country()' function.

We could change the structure of the JavaScript to make it more robust but for the moment let's test a workaround. Please try adding this to the JavaScript box:
window.addEvent('domReady', function() { change_country(); });
If it works OK this should execute the change_country() function once the page has finished loading.
Bob
wayward 09 Apr, 2009
Thanks again for the help Bob. I hope you have had a good trip.

It is good to hear that Mootools is loading OK. Can you tell me where to add the extra JavaScript code exactly? I assume it needs to be in the 'Form JavaScript' box, but I am not totally sure where. I added the line you mentioned above all the other lines that are in the JavaScript code box, is that OK?. This is the code I tried (notice the first line with the extra/new code you gave me):
    window.addEvent('domReady', function() { change_country(); });
    var options_array = new Array();
    options_array['1. Finance en IT - Foundation'] = new Array('Vrijdag 13 februari 2009', 'Vrijdag 10 april 2009', 'Vrijdag 12 juni 2009', 'Vrijdag 14 augustus 2009', 'Vrijdag 09 oktober 2009', 'Vrijdag 11 december 2009');
    options_array['Finance en IT - Practitioner Servicemanagement'] = new Array('Vrijdag 20 februari 2009', 'Vrijdag 19 juni 2009', 'Vrijdag 16 oktober 2009');   
    options_array['Finance en IT - Practitioner Projectmanagement'] = new Array('Vrijdag 17 april 2009', 'Vrijdag 21 augustus 2009', 'Vrijdag 18 december 2009');
    options_array['Opdrachtgeverschap voor IT-projecten'] = new Array('Op aanvraag');   
    options_array['InCompany'] = new Array('Op aanvraag');
    function change_country()
    {
        var first = $('first_list').value;
        var options = options_array[first];
        var second = $('second_list');
        second.length = 0;
        for ( var i = 0; i < options.length; i++ ) {
            second.options.length++;
            second.options[i] = new Option(options[i], options[i]);
        }
    }

But this is not working, I also tried to put the code underneath all the other code in the JavaScript code box but that didn't change anything either. So I think that I might be doing something wrong with the code (where does it need to be exactly?) Because the new code line did not help, I have removed that line from the form for now.
GreyHead 09 Apr, 2009
Hi wayward,

Ok - I learned a bit more since I wrote that, seems that JavaScript functions don't need () so please try
window.addEvent('domReady', function() { change_country; });


If that doesn't work we'll go back to the drawing board.

Bob
wayward 09 Apr, 2009
Hi Bob, that was a really fast reply🙂

I tried the new code you gave me without the () and I pasted that line above all other lines in the JavaScript box. I am sorry to say that it did not help me with the issue. Going back to the drawing board sounds like a lot of work...
GreyHead 09 Apr, 2009
Hi Wayward,

OK - added to the list, I've a few more 'longer' replies to work on first though :-(

Bob
Max_admin 10 Apr, 2009
Hi wayward,

assuming you have 2 dropdowns with this code:

HTML:

<select onchange="change_country()" id="select1">
<option value="option 1">option 1</option>
<option value="option 2">option 2</option>
</select>

<select id="select2">
</select>



JS code

        window.addEvent('domReady', function() { change_country(); });
        var options_array = new Array();
        options_array['1. Finance en IT - Foundation'] = new Array('Vrijdag 13 februari 2009', 'Vrijdag 10 april 2009', 'Vrijdag 12 juni 2009', 'Vrijdag 14 augustus 2009', 'Vrijdag 09 oktober 2009', 'Vrijdag 11 december 2009');
        options_array['Finance en IT - Practitioner Servicemanagement'] = new Array('Vrijdag 20 februari 2009', 'Vrijdag 19 juni 2009', 'Vrijdag 16 oktober 2009');   
        options_array['Finance en IT - Practitioner Projectmanagement'] = new Array('Vrijdag 17 april 2009', 'Vrijdag 21 augustus 2009', 'Vrijdag 18 december 2009');
        options_array['Opdrachtgeverschap voor IT-projecten'] = new Array('Op aanvraag');   
        options_array['InCompany'] = new Array('Op aanvraag');
        function change_country()
        {
            $('select2').options = options_array[$('select1').value];
        }


Regards
Max
Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
GreyHead 10 Apr, 2009
Hi wayward,

This version works - all this code goes into the Form HTML box. The HTML part just has the OnChange event removed - I've put that into the JavaScript part now.
<?php
$script = "
window.addEvent('domready', function () {
  var options_array = new Array();
  options_array['training1'] = new Array('Vrijdag 13 februari 2009', 'Vrijdag 10 april 2009', 'Vrijdag 12 juni 2009', 'Vrijdag 14 augustus 2009', 'Vrijdag 09 oktober 2009', 'Vrijdag 11 december 2009');
  options_array['training2'] = new Array('Vrijdag 20 februari 2009', 'Vrijdag 19 juni 2009', 'Vrijdag 16 oktober 2009');   
  options_array['training3'] = new Array('Vrijdag 17 april 2009', 'Vrijdag 21 augustus 2009', 'Vrijdag 18 december 2009');
  options_array['training4'] = new Array('Op aanvraag1');   
  options_array['training5'] = new Array('Op aanvraag2');
  var first_list = $('first_list');
  function change_country()
  {
    var first = first_list.value;
    var options = options_array[first];
    var second = $('second_list');
    second.length = 0;
    for ( var i = 0; i < options.length; i++ ) {
        second.options.length++;
        second.options[i] = new Option(options[i], options[i]);
    }
  }
  first_list.addEvent('change', change_country);
  // this line fires the function on page load
  window.addEvent('load', change_country);
});
";
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($script);
?>
<div class="form_item">
    <div class="form_element cf_dropdown">
        <select id='first_list' name='first_list' style='width:350px;' >
            <option value='training1' selected='selected' >1. Finance en IT - Foundation</option>
            <option value='training2'>2. Finance en IT - Practitioner Servicemanagement</option>
            <option value='training3'>3. Finance en IT - Practitioner Projectmanagement</option>
            <option value='training4'>4. Opdrachtgeverschap voor IT-projecten</option>
            <option value='training5'>5. InCompany (van hierboven genoemde trainingen)</option>
        </select>
    </div>
</div>
<div class="form_item">
    <div class="form_element cf_dropdown">
        <select id='second_list' name='second_list' style='width:350px;' >
            <option value='Vrijdag 13 februari 2009'>Vrijdag 13 februari 2009</option>
            <option value='Vrijdag 10 april 2009'>Vrijdag 10 april 2009</option>
            <option value='Vrijdag 12 juni 2009'>Vrijdag 12 juni 2009</option>
            <option value='Vrijdag 14 augustus 2009'>Vrijdag 14 augustus 2009</option>
            <option value='Vrijdag 09 oktober 2009'>Vrijdag 09 oktober 2009</option>
            <option value='Vrijdag 11 december 2009'>Vrijdag 11 december 2009</option>
      </select>
    </div>
<input type='submit' name='submit' value='Submit' />
</div>

Bob
wayward 21 Apr, 2009
Hi Bob and Max,

Once again, thank you very much for the support!

First of all I want to make sure I understood you correctly, Bob. I need to keep the "Form Code -> Form JavaScript:"-box empty and put all the above code you mentioned in the "Form Code -> Form HTML:"-box? Because that is what I did and the same problem is still there.

I made an online example for you; I copied your code in the HTML-box (added an </div> to your code because it was missing) and left the javascript-box empty. Then I added the catcha for the verification code, the 'form' can be found here: http://www.icensus.nl/index.php?option=com_chronocontact&chronoformname=testing_bobs_code

Lets try the following, in dropdown 1 you select option 3 (Finance en IT - Pratitioner Projectmanagement) and then in the second dropdown you select the date Vrijdag 21 augustus 2009 then you go to the verification code, but instead of filling in the correct code you make up a code and hit the 'Verzenden'(send) button. Then you will get the message that the verification code is not correct and you will also see that the second dropdown is now Vrijdag 17 april 2009 instead of 21 augustus 2009.😲

Guess it is harder to make it work then we all thought, any hope left?😟
GreyHead 21 Apr, 2009
Hi wayward,

Don't have time to look right now - but, by way of encouragement, the snippet I posted came from a working version!

Bob
GreyHead 26 Apr, 2009
Hi wayward,

Hmm . . . I thought that I'd had it working but have just been back to look and I'm no longer so sure. Problem is that I've tweaked the re-publish code on my version of Chronoforms. Once that's stable I'll look again. ChronoForms re-publishes the first list OK and tries to re-publish the second - but when it does the wrong values are set so it (quite correctly) does nothing.

Bob
wayward 11 Jun, 2009
Hi Bob,

I was wondering if the re-publish code is stable by now and if you have any ideas left concerning my problem with republishing the second dropdown?

Cheers,
WayWard
Max_admin 15 Jun, 2009
Hi WayWard,

the re publish code is stable but to republish a dropdown after another choice has been made you need to add the republish event to the onChange event of the first drop, for this you need to use the "setValue" custom function defined for the republish and feed it with the data to load for any choice made, you may load these data on form load or using AJAX on time!

Cheers
Max
Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
This topic is locked and no more replies can be posted.