Forums

Hi !

I want to have two drop down menus in my form.
The second one populates automatically upon selection from the first drop down menu.

following code is working fine in html file both in ie and firefox. But its not working when using it with chronoform.

<form name="doublecombo">
<p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option>South</option>
<option>North</option>
<option>Central</option>
</select>
<select name="stage2" size="1">
<option value="Mohammed Khan">Mohammed Khan</option>
<option value="Zahir Zaidi">Zahir Zaidi</option>
</select>

<script>
<!--

/*
Double Combo Script Credit
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScripts here!
*/


var groups=document.doublecombo.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("Mohammed Khan","Mohammed Khan")
group[0][1]=new Option("Zahir Zaidi","Zahir Zaidi")

group[1][0]=new Option("Farhan Durrani","Farhan Durrani")
group[1][1]=new Option("Rudaba Zehra Nasir","Rudaba Zehra Nasir")

group[2][0]=new Option("Naeem Malik","Naeem Malik")
group[2][1]=new Option("Natasha","Natasha")

var temp=document.doublecombo.stage2

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

//-->
</script>

</form>

Please tell me how can I incorporate this in my chronoform.

regards

Cs

Hi codeslayer,

There seem to be all kinds of problems when this script is embedded into a Joomla page. Here's a modified version that seems to work OK. NB It uses the MooTools library and I've added 'id's to the two select tags and removed the <form> tags (but otherwise the html is unchanged). Form HTML

<p><select name="example" id='example' size="1" onChange="redirect(this.options.selectedIndex)">
<option>South</option>
<option>North</option>
<option>Central</option>
</select>
<select id='stage2' name="stage2" size="1">
<option value="Mohammed Khan">Mohammed Khan</option>
<option value="Zahir Zaidi">Zahir Zaidi</option>
</select>

JavaScript

var group = new Array();

group[0] = new Array();
group[0][0] = new Option("Mohammed Khan","Mohammed Khan");
group[0][1] = new Option("Zahir Zaidi","Zahir Zaidi");

group[1] = new Array();
group[1][0] = new Option("Farhan Durrani","Farhan Durrani");
group[1][1] = new Option("Rudaba Zehra Nasir","Rudaba Zehra Nasir");

group[2] = new Array();
group[2][0] = new Option("Naeem Malik","Naeem Malik");
group[2][1] = new Option("Natasha","Natasha");

function redirect(x)
{
    var stage2 = $('stage2');
    delete stage2.options;
    for ( i = 0; i < group[x].length; i++ ) {
        stage2.options[i] = new Option(group[x][i].text, group[x][i].value);
    }
}

Bob

Thank you BOB, 😀

Its working perfectly fine in Firefox, but not working in IE6.
I am downloading ie7 to see if its working in it or not.

What changes would make the form work in ie6 too, any idea ?

Regards
CS

Hi codesalyer,

Sorry I've no idea what the IE6 problem might be (does it give any erro message?) I only have IE6 in a virtual machine - not very helpful for javascript debugging.

There's another variant on this code in the forums which has teh data in the html - it was a country drop-down that selected state name - search on 'Canada' or 'Mexico' and you should find it.

Bob

Thanks for reply Bob,🙂

Yes, ie6 is giving error on line:280 char:6 Error:"null" is null or not an object.
I'll try to troubleshoot this.

Thansk for the link I'll look into it and see if it suits my need🙂

Best regards

CS