Dynamic Listbox/Dropbox that can POST

Nihilists

I am looking for direction on creating a dynamic listbox or drop box that changes depending on the previous selection. On each selection that it chosen it hold a hidden field that will be POSTed to a shopping cart. I am open to use Javascript and PHP. Ethier listbox or drop menu. Thanks

mystrymaster

well javascript will be the way to do it without reloads for each drop down - do a search on google for dynamically changing drop down or change drop down dependant (you get the idea)

if you want to do it with reloads each time (Bad idea IMO) then you can do if else statements.

Nihilists

I found this here:
http://www.javascriptkit.com/script/script2/triplecombo.shtml

One of the options is:

secondGroup[1][1][3]=new Option("Java-Scripts.net","http://java-scripts.net");

whereas http://java-scripts.net is the link.
Can that be a hidden POST suchas:
<input type="hidden" name="color" value="blue">

I tried replacing the link with <... ...> and the menu did not work

Each drop menu or listbox needs to POST in a hidden field between <... ...>
If it can be done without a hidden field, thats fine too
Thanks

Nihilists

there was no need to use <... ...> Since it was already in a field
The problem with the example was that on the last menu it jump to a page that did not existed

what I am trying to do:
(menu = ethier listbox or drop box)

Firsy menu has a given SELECT NAME then for each selection a name and values that will posted to a shopping cart

Second menu is dependent on the first selection
If they selected A: then the SELECT NAME, names and vales for the options appears
If they selected B: then the SELECT NAME is different from A, names and vales for the options appears

Third menu act the same way as the second

Basically they choose a particular style of an item. Each style has different option that don't always relate to the other option. So, the <select name="varies".... varies depending on the previous selection after the first one is made. The first selection name stays the name then the second and third varies depending on the first selection.

I am open to java and php to pull this off. This kind of selection will appear muliple times.

Nihilists

http://www.javascriptkit.com/script...iplecombo.shtml

I deleted the line os stage3:
onChange="redirect1(this.options.selectedIndex)"

Which fix the problem with it jumping to the link

Is there anyway to change the select name on stage2 and stage3 based on what the previous selection is?

Nihilists

I have the solution all done in java using the script mentioned before:

<body>
<FORM name="isc">
<table border="0" cellspacing="0" cellpadding="0">
  <tr align="center"> 
    <td nowrap height="11">  

<select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option selected>Choose Wisely</option>
<option>Choice 1</option>
<option>Choice 2</option>
</select>

<select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>Extra Options if Available</option>
<option value=" " selected>Extra Options if Available</option>
</select>

<select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">
          <option value=" " selected> </option>
<option value=" " selected>Extra Options if Available</option>
<option value=" " selected>Extra Options if Available</option>
</select>

<script>
<!--

/*
Triple Combo Script Credit
By Hamid Cheheltani/ JavaScript Kit ([url]http://www.javascriptkit.com[/url])
Visit [url]http://javascriptkit.com[/url] for this and over 400+ other scripts
*/

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

group[i]=new Array()
group[0][0]=new Option("Extra Option if Available"," ");
group[1][0]=new Option("Menu 1"," ");
group[1][1]=new Option("Bronze","47");
group[1][2]=new Option("Silver","46");
group[1][3]=new Option("Gold","45");
group[2][0]=new Option("Menu 1A"," ");
group[2][1]=new Option("Some News","115");
group[2][2]=new Option("Broken Technology","116"); 

var groups2=document.isc.example.options.length
var group2=new Array(groups2)
for (i=0; i<groups2; i++)
group2[i]=new Array()
group2[0][0]=new Option("Extra Option if Available"," ");
group2[1][0]=new Option("Menu 2"," ");
group2[1][1]=new Option("Red","47");
group2[1][2]=new Option("Black","46");
group2[1][3]=new Option("White","45");
group2[2][0]=new Option("Menu 2B"," ");
group2[2][1]=new Option("General News","115");
group2[2][2]=new Option("Technology News","116"); 

var temp=document.isc.stage2
var temp1=document.isc.stage3


function redirect(x){
for (m=temp.options.length-1;m>0;m--){
temp.options[m]=null
}
for (m=temp1.options.length-1;m>0;m--){
temp1.options[m]=null
}

for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}

for (i=0;i<group2[x].length;i++){
temp1.options[i]=new Option(group2[x][i].text,group2[x][i].value)
}
}



</script>

	</td>
  </tr>

</table>
</FORM>

<p><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>
</body>

amrigo

there is a www.zend.com article called chained selectors that seems to be wjhat you need

DaveHS

Hello all;

First of all, thank you for your posts, they have been very helpful in zero-ing in on what I need. Though I am a beginner at Javascript, I am looking for a script, very similar to the one above, but that will:

A) Dictate what appears in menu 2 is dependant on what is was selected in the menu 1, and dictate what appears in menu 3 is dependant on what was selected in menu 2 (as oposed to the one above where the first menu dictates the choices in both the second & third menu); and

😎 when a selection has been selected in each menu, the user can hit a submit button and get a preset message (1 of 3 preprogrammed based on the 3 menu item) with a gif attachment to appear right below the drop down menus.

I guess the simplest example I can give of what I am trying to do would be, for example, a person to choose a country, then if they select the USA (let's say), then menu 2 brings up the states. Then the person selects their state, & menu 3 brings up the cities & towns of that state. Then when the person selects their town, and hits the submit button, one of 3 generic responses with a gif will appear below it with, which response based on the 3rd menu choice (like, say, a service provider would say "yes", "no", or "plan to provide service" to that town, as an example).

Now, for the most part I have found scripts that perform option A, but the scripts I found are limited to only a first & second list menu. In my case, I need one that is 3 menus deep, and if I can find one like that, it will provide me with an opportunity to learn how it worked, and potentially implement it in menus that are 4 or 5 menus deep, should ever the need arise later on.

Any assistance on this would be greatful, and please feel free to private message or IM me. Thanks

Dave

mniessen

Dave,

You could check this site: http://worldstats.assemblysys.com

Hope that helps.

Michaël

webchef

Originally posted by mniessen
Dave,

You could check this site: http://worldstats.assemblysys.com

Hope that helps.

Michaël

The script on the above page reloads the page with every user selection, so its probably not what you are looking for.

the only prewritten script out there is at zend.com. Just do a google search for "chained Selectors" its the first link. It uses javascript and PHP, utilizing classes and such. its built for only two teir dropdowns. So i wish you the best of luck getting that script to expand to 3 or more. Personally.. i recommend not using drop down lists at all.

numlocked

I'm trying to so something very similar to DaveHS. I want to create a series of menus that define someone's geographical location with increasing specificity. The Zend tutorial that amrigo and webchef pointed out will definitely do the trick. I was all set to start customizing that script (I want to allow users to add their own menu choices), when webchef's final comment caught my eye. What would you recommend as an alternative to drop down menus? You say you don't like them - fair enough, they seem clunky to me - but I can't think of an alternate solution. What do you use instead? Thanks.

DmmH

you really wanne check this one out:

http://www.yxscripts.com/cs/chainedselects.html

if u need help:

http://www.yxscripts.com/bbs/phpBB2/viewforum.php?f=10

gl, though u wont need it, its easy 🙂

numlocked

I can't believe someone answered this after almost 6 months! Thank you!! That tutorial is PERFECT. Don't know how to thank you enough.

-numLocked

DmmH

very welcome 🙂

nemati_mojgan

Originally posted by Nihilists
I am looking for direction on creating a dynamic listbox or drop box that changes depending on the previous selection. On each selection that it chosen it hold a hidden field that will be POSTed to a shopping cart. I am open to use Javascript and PHP. Ethier listbox or drop menu. Thanks

Take a look at this code:

http://javascript.internet.com/navigation/connected-comboxes.html

I have the same problem too, but I think it could help you because I want to get the list from a database and insert the selected items to another table, which makes it more complicated.

Wish you could solve your problem.

DanielLiljeberg

All I say is... AJAX 😃

cyberlew15

if you need the results from another page use javascripts interwindow comms open a new window using the _target directive from a html link or from the on combobox/listbox changed js the window is the path to the php script which executes returning a javascript output geneated with php from the mysql values and uses javascript to change the other windows dropdown box code from the php output just make sure you put in an autocloser the window will flash open so fast that the user will not know or care.

Firstly go to dynamicdrive and look up window remote control i'm sure the concept is transferrable

then use your dropdown box code

throw the part that changes the contentboxes content into the newly opened window and it should work

cyberlew15

to do so you simply need to use the dynamic drive remote window and popup window on change source

I'm assuming that you know about javascriot and can google the DOM of your intended Browsers

On change of dropdown/combo box open window based on what selection is made

the window invokes a server call to a php script that query's mysql and returns the javascript which will change the combobox in the other window based on the variables mysql returns

It's harder than it sounds but this should work

twat_999

im trying to create a dynamic combo box based on the selection from the first combo box using php + javascript. ive seen all the links and stuff but i want to create my own as its for my FYP at uni and i cant plagerise 😃

pretty sure thhis code

document.forms['formName'].month.options[<?php echo $i;?>] = new Option('<?php echo $salary_range_result['range'];?>', '<?php echo $salary_range_result['range']; $i++?>');

IS THE PROBLEM!.
pLEASE HELP been stuck on this for 2 days. :mad:

<?php

require_once("includes/usersession.phpm");

$objSession = new UserSession();
?>

<html>
<head>
<script type="text/javascript">
<!--

function getMonths(){

switch(type)
{
case(type="Annual salary"):
<?php
//salary range drop down

$salary_range = "select * from \"salary_range\"";
$result = pg_query($salary_range);

?>

  <?php  $i = 0;
  while ($salary_range_result = pg_fetch_array($result)) 
	{

?>
document.forms['formName'].month.options[<?php echo $i;?>] = new Option('<?php echo $salary_range_result['range'];?>', '<?php echo $salary_range_result['range']; $i++?>');

<?php
   }

   ?>

break
case(n="2"):
alert("You typed "+n);
break
case(n="3"):
alert("You typed "+n);
break
default:
alert("Wrong number");
break
}

}

-->
</script>
</head>
<body>
<form name="formName" method="post" action="">

<?php
//Salary type range drop down

$Salary_type = "select * from \"salary_type\"";
$result = pg_query($Salary_type);
if (pg_num_rows($result)==0)
{
echo "no Salary types setup";
}
else
{
?>
<select name="Salary_type" onchange="getMonths();" >
<?php while ($Salary_type_result = pg_fetch_array($result))
{
$rows++;
echo '<option value="' . $Salary_type_result['type'] . '">' . $Salary_type_result['type'] . '</option> ';

?> </select>

<?php
   }

   ?>

jeanne

Check out this sites:
http://www.geodatasource.com. Hope this helps you.