On-the-fly Dropdown content

[JavaGh0sT]

Hi everone,

after consulting your great forums many times, to help me solve small and sometimes bigger problems, I finally found the need to subscribe. And so I did.

I am using the following script: [ link ]

I modified it, and in my code it looks like this:

<form name="MyForm" method="POST" action="post.php">

<select name="primary" onChange="javascript:MakeSecondary()" size="1">
<option selected value="-- Choose category --">-- Choose category --</option>
<option value="Fashion">Fashion</option>
<option value="Art">Art</option>
<option value="Media">Media</option>
<option value="Sport">Sport</option>
</select>

<select name="secondary">
<option></option>
<option></option>
<option>~~~~~~~~ JavaScript Required ~~~~~~~~</option>
</select>

</form>

<script type="text/javascript" language="JavaScript">
var FormName = "MyForm";

var initSubLine = "-- Choose category --";

var FashionArray = new Array();
FashionArray[0] = "-- Choose Fashion sub category --";
FashionArray[1] = "Fashion1";
FashionArray[2] = "Fashion2";

var ArtArray = new Array(); 
ArtArray[0] = "-- Choose Art sub category --";
ArtArray[1] = "Art1";
ArtArray[2] = "Art2";

var MediaArray = new Array(); 
MediaArray[0] = "-- Choose Media sub category --";
MediaArray[1] = "Media1";
MediaArray[2] = "Media2";

var SportArray = new Array();
SportArray[0] = "-- Choose Sport sub category --";
SportArray[1] = "1";

function Initialize() {
eval('document.' + FormName + '.secondary.options.length = 0');
eval('document.' + FormName + '.secondary.options[0] = new Option(initSubLine,"")');
} // function Initialize()

function MakeSecondary() {
var v = new String();
var plen = 0;
eval('plen = document.' + FormName + '.primary.length');
for(var i = 0; i < plen; i++) {
	var theone = false;
	eval('theone = document.' + FormName + '.primary.options[i].selected');
	if(theone == true) {
		eval('v = document.' + FormName + '.primary.options[i].value');
		i = plen;
		}
	}
var vlen = v.length;
var ts = new String();
for(var vi = 0; vi < vlen; vi++) {
	var vs = v.substr(vi,1);
	if((vs >= 'A' && vs <= 'Z') || (vs >= 'a' && vs <= 'z') || (vs >= '0' && vs <= '9')) {
		ts += vs;
		}
}
v = ts;
var Splitter = "|";
if(v.length < 1) { Initialize(); return; }
var arrayLength = eval(v + "Array.length");
eval('document.' + FormName + '.secondary.options.length = 0');
for(var i = 0; i < arrayLength; i++ ) {
	var iArray = new Array();
	eval("iArray = " + v + "Array[i].split(Splitter)");
	if(iArray.length < 2) { iArray[1] = ""; }
	eval('document.' + FormName + '.secondary.options[i] = new Option(iArray[0],iArray[1])');
	}
}

setTimeout("Initialize()",500);
//-->
</script>

Everything seems to work fine and gets posted perfectly to post.php but when I define the variables like this:

<?php
$cat = $_POST['primary'];
$subcat = $_POST['secondary];
echo $cat;
echo $subcat;
?>

the $subcat variable comes out empty...

Please, does anyone know what I'm doing wrong?

Thanks in advance,
Gh0sT

 

[ehsant]

Hi...
The problem is very simple...
If you take a closer look at the original sample, while defining the arrays, the author defines the arrays like this :

redArray[0] = "-- Select a Red Secondary --";
redArray[1] = "Red + Blue = Purple|purple";
redArray[2] = "Red + Yellow = Orange|orange";

there is a splitter for each row :
redArray[1] = "Red + Blue = Purple|purple";

and after the splitter there is the a value :
redArray[1] = "Red + Blue = Purple|purple";

in the end of the function MakeSecondary() there is a loop which splits the array rows into to parts :
1- The option Title
2- The option Value

and because you have missed the value part in your code :

FashionArray[0] = "-- Choose Fashion sub category --";
FashionArray[1] = "Fashion1";
FashionArray[2] = "Fashion2";

then your options, only has Titles but no Values.

The solution is even more simple.
you have to add a splitter to your array definition part and put the value after it :

FashionArray[0] = "-- Choose Fashion sub category --";
FashionArray[1] = "Fashion1[COLOR=red]|Fashion1[/color]";
FashionArray[2] = "Fashion2[COLOR=red]|Fashion2[/color]";

here for sample I gave Fashion1 and Fashion2 as values.
you can use any value which you want to use after you post your form...


----
Harsh words break no bones but they do break hearts.
E.T.