On-the-fly Dropdown content

[Gh0sT]

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 come out empty... I know this is more of a JavaScript question, but perhaps a PHP solution can help me out, or one of you PHP geniuses knows some JavaScript. 😉

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

Thanks in advance,
Gh0sT

[Weedpacket]

First, off, is everything getting posted perfectly to post.php? What does print_r($_POST) contain?

If the stuff isn't there then no amount of handwaving by PHP will conjure it up out of nothing, and you'll need to fix your Javascript. And a Javascript forum will have a higher density of Javascript experts.

[Gh0sT]

Thanks alot for replying, Weedpacket!

I agree on the javascript comment, but it seems I can't find and javascript experts to help me fix this problem, so I thought I might try my luck here. One of the best and most active php forum around. :rolleyes:

When using the print_r() function, I get:

[primary] => Fashion
[secondary] =>

So it seems to me the primary gets posted just fine, but the secondary just won't come through.
Maybe I should output the value of the secondary dropdown box to a textfield (javascripts the only way I can think of) and post that to post.php..

Any other ideas?

Greets,
Gh0sT

[Rodney_H_]

I looked at your JS for a little while and didn't see that the second level had an array of key->value so that you COULD extract it from your posted form (noobie at PHP and JS, so take this with a grain of salt !) I was able to confirm my suspicions when i swapped your form's method from post to get and looked at the string in the url...

I had copied and pasted a similar script from javascriptkit.com recently and had the file saved. I just copied and pasted your values into it and it works.

I am hoping that looking at this will help you trouble shoot your JS.

<html>
<head><title>test</title></head>
<body>
<?php
if (!isset($_POST['stage2'])){
?>
<form name="dynamiccombo" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<select name="stage2" size="1" onChange="displaysub()">
<option value="#">This is a place Holder text </option>
<option value="#">This is a Place Holder text </option>
<option value="#">This is a Place Holder text </option>
<option value="#">This is a Place Holder text </option>
</select>
<input type="submit" name="submit" value="submit" />
</form>
<script>
<!--
// 2-level combo box script- by javascriptkit.com
//Visit JavaScript Kit (http://javascriptkit.com) for script
//Credit must stay intact for use

var category=new Array()
category[0]=new Option("SELECT A CATEGORY ", "") //THIS LINE RESERVED TO CONTAIN COMBO TITLE
category[1]=new Option("Fashion", "combo1")
category[2]=new Option("Art", "combo2")
category[3]=new Option("Media", "combo3")
category[4]=new Option("Sport", "combo4")

var combo1=new Array()
combo1[0]=new Option("Fashion 1","fashion.1")
combo1[1]=new Option("Fashion 2","fashion.2")
combo1[2]=new Option("Fashion 3","fashion.3")

var combo2=new Array()
combo2[0]=new Option("Art 1","art.1")
combo2[1]=new Option("Art 2","art.2")
combo2[2]=new Option("Art 3","art.3")
combo2[3]=new Option("Art 4","art.4")
combo2[4]=new Option("Art 5","art.5")
combo2[5]=new Option("Art 6","art.6")
combo2[6]=new Option("Art 7","art.7")
combo2[7]=new Option("Art 8","art.8")
combo2[8]=new Option("Art 9","art.9")

var combo3=new Array()

combo3[0]=new Option("Media 1","media.1")
combo3[1]=new Option("Media 2","media.2")
combo3[2]=new Option("Media 3","media.3")
combo3[3]=new Option("Media 4","media.4")
combo3[4]=new Option("Media 5","media.5")

var combo4=new Array()
combo4[0]=new Option("Sport 1","sport.1")
combo4[1]=new Option("Sport 2","sport.2")

var curlevel=1
var cacheobj=document.dynamiccombo.stage2

function populate(x){
for (m=cacheobj.options.length-1;m>0;m--)
cacheobj.options[m]=null
selectedarray=eval(x)
for (i=0;i<selectedarray.length;i++)
cacheobj.options[i]=new Option(selectedarray[i].text,selectedarray[i].value)
cacheobj.options[0].selected=true

}

function displaysub(){
if (curlevel==1){
populate(cacheobj.options[cacheobj.selectedIndex].value)
curlevel=2
}
else
gothere()
}

gothere()
function gothere(){ 
}

//SHOW categories by default
populate(category)

//-->
</script>

<?php
} else {
$choice = $_POST['stage2'];
$sub_cat = explode(".", $choice);
echo 'your form was submitted';
echo '<br />cat: ' . $sub_cat[0]; // cat
echo '<br />sub cat: ' . $sub_cat[1]; // sub_cat
}
?>


</body>
</html> 

[Weedpacket]

I've found the people who hang out at http://www.codingforums.com/ to be well up with the play when it comes to Javascript.

[Gh0sT]

Hey guys,

once again, thanks for replying on such short notice.
First of all I can tell you that I found the - much too simple - solution to my problem. I forgot to add values to the menu items in the second dropdown box..

So:

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

becomes:

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

:glare:

@ H.: Thanks for the script. Looks very nice. However, I've tried several other Javascripts, but they all seem to stop the FCKeditor, which I've added to the same form, from functioning.

@: Wow, that's an awesome forum. Didn't have that in my bookmarks yet. Thanks!

Many thanks for trying to help me out. Appeciated!
Gh0sT

[Rodney_H_]

I am glad that you figured it out, Gh0sT. At first, I tried using commas instead of the tubes, so at least I don't fool too silly.

Obviously, I will have to check out those forums, too, Weedpacket, as you can see from my lack of JS prowess...

-Kind regards, gents.