Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations biv343 on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Two dropdowns big headache

Status
Not open for further replies.
gokeeffe

gokeeffe

Programmer
Jan 11, 2005
170
IE
Hi

I really need some guidance, new to this stuff.

My basic problem is

I have two dropdown lists on a page.

When I select an option in dropdown one

the values in drop down two will depend on what option is selected in dropdown one

Is it possible to do this without Javascript if not could someone please help me

Very frustrated.



Example


// DROP DOWN ONE


echo'<tr>
<td colspan="2" class="labelcell"><label for="secondary_exam_id">

Select Exam:</label></td>';

echo'<td colspan="2" class="fieldcell2"> <select name="secondary_exam_id">';

$query_result = mysql_query ('SELECT * FROM secondary_exam_type ORDER BY secondary_exam_id');

while ($row = mysql_fetch_array ($query_result, MYSQL_NUM))

{
echo "<option value=\"$row[0]\">$row[1]</option>\n";
}

echo'</select></td>';

echo'</tr>';


// DROP DOWN TWO



echo'<tr>
<td colspan="2" class="labelcell"><label for="junior_subject_id">

Select Subject:</label></td>';

echo'<td colspan="2" class="fieldcell2"><select name="junior_subject_id">';


$query_result = mysql_query ('SELECT * FROM junior_subjects ORDER BY junior_subject_id');

while ($row = mysql_fetch_array ($query_result, MYSQL_NUM))

{
echo "<option value=\"$row[0]\">$row[1]</option>\n";
}

echo'</select></td>';

echo'</tr>';

Tks in advance

Gaz
 
Sort by date Sort by votes
It is possible. You would need either:
1. Javascript to submit the page once the first dropdown is selected
2. A button next to the first dropdown, which would submit the form.

After that, it is easy. Your page would submit the stuff from the first dropdown, use php to parse that data and insert it in the SQL query of the second dropdown.
 
Upvote 0 Downvote
Tks for the help Chacline i'll try it again

Not easy when your inexperienced
 
Upvote 0 Downvote
Which method would you recommend the Javascript way or

the subit button judging from my code

Tks

Gaz
 
Upvote 0 Downvote
it's ok. at least tell me whether the example on that page is what you need...
 
Upvote 0 Downvote
Yes this is waht i am aiming for but i'm not sure

how to incorporate javascript into the php arrays that i

have, if you could give me a flavour of what to do with my

code it would help me alot.

Thank You
 
Upvote 0 Downvote
something like the code below, it's not test and you must to modify it, I just want yo show you how to use the scrip.

Code: 
//   (exit interpreting php and put plane html)
?>

<form name="doublecombo">
<p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Technology Sites</option>
<option>News Sites</option>
<option>Search Engines</option>
</select>
<select name="stage2" size="1">
<option value="[URL unfurl="true"]http://javascriptkit.com">JavaScript[/URL] Kit</option>
<option value="[URL unfurl="true"]http://www.news.com">News.com</option>[/URL]
<option value="[URL unfurl="true"]http://www.wired.com">Wired[/URL] News</option>
</select>
<input type="button" name="test" value="Go!"
onClick="go()">
</p>

<script>
<!--

/*
Double Combo Script Credit
By JavaScript Kit ([URL unfurl="true"]www.javascriptkit.com)[/URL]
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()

<?php

//note this is php code to fill the 2nd and 3th drop down boxes:

$query_result = mysql_query ('SELECT * FROM junior_subjects ORDER BY junior_subject_id');
$counter=0;
while ($row = mysql_fetch_array ($query_result, MYSQL_NUM))
 {
      echo "group[0][$count]=new Option("$row[1]","$row[0]")\n";
 }

$counter=0;
$query_result = mysql_query ('SELECT * FROM [b]other_table[/b] ORDER BY whatever');
while ($row = mysql_fetch_array ($query_result, MYSQL_NUM))
 {
      echo "group[1][$count]=new Option("$row[1]","$row[0]")\n";
 }

// now exiting from php to plain html again

?>

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
}

function go(){
location=temp.options[temp.selectedIndex].value
}
//-->
</script>

</form>

<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="[URL unfurl="true"]http://javascriptkit.com">JavaScript[/URL]
Kit</a></font></p>

<?php // entering again to php
 
Upvote 0 Downvote
Used your code but im getting an error now on the first

echo for the mysql statement in the javascript

this line :

while ($row = mysql_fetch_array ($query_result, MYSQL_NUM))
{
echo "group[0][$count]=new Option("$row[1]","$row[0]")\n";
}

also the php tags don't look like their active within the

javascript




<script language="JavaScript">
<!--

/*
Double Combo Script Credit
By JavaScript Kit (Over 200+ free JavaScripts here!
*/

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


<?php

//note this is php code to fill the 2nd and 3th drop down boxes:

$query_result = mysql_query ('SELECT * FROM junior_subjects ORDER BY junior_subject_id');
$counter=0;
while ($row = mysql_fetch_array ($query_result, MYSQL_NUM))
{
echo "group[0][$count]=new Option("$row[1]","$row[0]")\n";
}

$counter=0;
$query_result = mysql_query ('SELECT * FROM leaving_subjects ORDER BY leaving_subject_id');
while ($row = mysql_fetch_array ($query_result, MYSQL_NUM))
{
echo "group[1][$count]=new Option("$row[1]","$row[0]")\n";
}



?>


<script language="JavaScript">
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=new Option(group[x].text,group[x].value)
}
temp.options[0].selected=true
}

function go(){
location=temp.options[temp.selectedIndex].value
}
//-->
</script>
 
Upvote 0 Downvote
oops.. escape the " chars:

echo "group[0][$count]=new Option(\"$row[1]\",\"$row[0]\")\n";
 
Upvote 0 Downvote
I made these changes but it still wont work, could you

take another look at the entire code please, i know we are

getting closer. Tks a mill

<?php # index.php

// This is the main page for the site

// Include the configuration file for error management and such
require_once ('includes/config.inc');

// Set the title and the html header
$page_title = 'Step One';

// Include the header file
include_once('includes/header.html');

require_once ('../mysql_connect.php'); // Connect to the Database

?>


<div id = "contentform">

<form name = "doublecombo" id="signup" action= "<?php echo $_SERVER['PHP_SELF'];?>" method="post">

<fieldset>

<legend>Step One &nbsp;<font size="-2"><font color="#666666">Exam - Subject - Level</font></font></legend>
<h2>
Select Exam : Provides you with the option of Junior or Leaving Certificate</br></br>
Select Subject : Provides you with the option of all the Junior & Leaving Certificate subjects</br></br>
Select Level : Provides you with the option of Higher,Ordinary,Foundation or All</br>
</h2>

<table align="center">

<?php

// DROP DOWN FOR SECONDARY EXAM


echo'<tr>
<td colspan="2" class="labelcell"><label for="secondary_exam_id">Select Exam:</label></td>';

echo'<td colspan="2" class="fieldcell2">
<select name="secondary_exam_id" onChange = "redirect(this.options.selectedIndex)">';

$query_result = mysql_query ('SELECT * FROM secondary_exam_type ORDER BY secondary_exam_id');

while ($row = mysql_fetch_array ($query_result, MYSQL_NUM))

{
echo "<option value=\"$row[0]\">$row[1]</option>\n";
}

echo'</select></td>';

echo'</tr>';



// DROP DOWN FOR JUNIOR CERT SUBJECT



echo'<tr>
<td colspan="2" class="labelcell"><label for="junior_subject_id">Select Subject:</label></td>';

echo'<td colspan="2" class="fieldcell2"><select name="junior_subject_id">';

$query_result = mysql_query ('SELECT * FROM junior_subjects ORDER BY junior_subject_id');

while ($row = mysql_fetch_array ($query_result, MYSQL_NUM))

{
echo "<option value=\"$row[0]\">$row[1]</option>\n";
}

echo'</select></td>';

echo'</tr>';




// DROP DOWN FOR LEAVING CERT SUBJECT


echo'<tr>
<td colspan="2" class="labelcell"><label for="leaving_subject_id">Select Subject:</label></td>';

echo'<td colspan="2" class="fieldcell2"><select name="leaving_subject_id">';

$query_result = mysql_query ('SELECT * FROM leaving_subjects ORDER BY leaving_subject_id');

while ($row = mysql_fetch_array ($query_result, MYSQL_NUM))

{
echo "<option value=\"$row[0]\">$row[1]</option>\n";
}

echo'</select></td>';

echo'</tr>';







mysql_close();



?>

</table>
</fieldset>
<input type="submit" name="submit" value="Step Two" class="btn"/>

<script language="JavaScript">
<!--

/*
Double Combo Script Credit
By JavaScript Kit (Over 200+ free JavaScripts here!
*/

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


<?php

//note this is php code to fill the 2nd and 3th drop down boxes:

$query_result = mysql_query ('SELECT * FROM junior_subjects ORDER BY junior_subject_id');
$counter=0;
while ($row = mysql_fetch_array ($query_result, MYSQL_NUM))
{
echo "group[0][$count]=new Option(\"$row[1]\",\"$row[0]\")\n";

}

$counter=0;
$query_result = mysql_query ('SELECT * FROM leaving_subjects ORDER BY leaving_subject_id');
while ($row = mysql_fetch_array ($query_result, MYSQL_NUM))
{
echo "group[1][$count]=new Option(\"$row[1]\",\"$row[0]\")\n";
}



?>



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=new Option(group[x].text,group[x].value)
}
temp.options[0].selected=true
}

function go(){
location=temp.options[temp.selectedIndex].value
}
//-->
</script>



</form>


<?php
// Include the footer file
include_once('includes/footer.html');
?>
 
Upvote 0 Downvote
Gosh... My linux is dead! sorry, I lost my apache/php/mysql box and my workstation!! fortunatelly I have backed up all my data.. ;)

I recommend you to write the page in plain html in order to make the javascript work, then when you undestand what's going on with the page transform the page to php and get the data (select data) from mysql.

(at least while I rebuild my PC!)

Cheers.
 
Upvote 0 Downvote
You could try something like this (it's what has already been suggested, but it's a little more plain and perhaps easier to figure out without lots of javascript):

Code: 
<?php
	echo("firstlist=".$_POST['firstlist']."<BR>");
?>

<form action=<?php echo $_SERVER['PHP_SELF']; ?> method=post name=form1>

<select name=firstlist onChange="this.form.submit()">
	<option value="" <?php if ($_POST['firstlist'] == "") echo "SELECTED"; ?>>Choose a Colour
	<option value="red" <?php if ($_POST['firstlist'] == "red") echo "SELECTED"; ?>>Red
	<option value="blue" <?php if ($_POST['firstlist'] == "blue") echo "SELECTED"; ?>>Blue
	<option value="green" <?php if ($_POST['firstlist'] == "green") echo "SELECTED"; ?>>Green
</select>

<?php
	if (isset($_POST['firstlist']))
	{
		echo("<SELECT name=secondlist>");
		if ($_POST['firstlist'] == "red")
		{
		?>
			<option value="R">R
			<option vlaue="E">E
			<option value="D">D
		<?php
		}
		if ($_POST['firstlist'] == "blue")
		{
		?>
			<option value="B">B
			<option value="L">L
			<option value="U">U
			<option value="E">E
		<?php
		}
		if ($_POST['firstlist'] == "green")
		{
		?>
			<option value="G">G
			<option value="R">R
			<option value="E">E
			<option value="E">E
			<option value="N">N
		<?php
		}
		echo("</SELECT>");
		echo("<input type=button value=\"Click!\" onClick=\"this.form.submit()\">");
	}
?>

</form>

You will, of course, replace what I've got in the SELECTs with your mySQL queries to populate the dropdown lists, but if you copy exactly what's above you'll see how it works and that should put you on the right track. Maybe I'll go play with it a bit and see if I can provide an example with database calls. Shouldn't take too long.

Marc
 
Upvote 0 Downvote
That would be great Marc, I just need to see the concept

with database calls, I know i'll be close then.

Cheers Marc

 
Upvote 0 Downvote
Here we go... one that works by pulling the data from mysql tables. There are probably more efficient ways of doing this, but this is how I made it work.

Code: 
<?php
	echo("firstlist=".$_POST['firstlist']."<BR>");
?>

<form action=<?php echo $_SERVER['PHP_SELF']; ?> method=post name=form1>

<select name=firstlist onChange="this.form.submit()">
	<option value="" <?php if ($_POST['firstlist'] == "") echo " SELECTED"; ?>>Choose a Colour
<?php
	$query1 = "SELECT * FROM tbl_stepone order by stepone_index";
	$result1 = mysql_query($query1);
	while ($list1 = mysql_fetch_array($result1))
	{
		echo("<option value=\"".$list1['stepone_index']."\"");
			if ($_POST['firstlist'] == $list1['stepone_index']) echo "SELECTED";
			echo(">".$list1['stepone_name']."\r");
	}
?>
</select>

<?php
	if ((isset($_POST['firstlist'])) && ($_POST['firstlist'] <> ""))
	{
		echo("<SELECT name=secondlist>");
		$query2 = "SELECT * FROM tbl_steptwo WHERE steptwo_parent = ".$_POST['firstlist']." order by steptwo_index";
		$result2 = mysql_query($query2);
		while ($list2 = mysql_fetch_array($result2))
		{
			echo("<option value=\"".$list2['steptwo_index']."\">".$list2['steptwo_name']."\r");
		}
		echo("</SELECT>");
		echo("<input type=button value=\"Click!\" onClick=\"this.form.submit()\">");
	}
?>

</form>

Modify at will. Keep in mind that when the person selects something from the first table the whole page is resubmitted to itself so if it's a big page it may take a while to pop up that second selection box. I'd try to keep the rest of the page as small as possible. If you want to try with the data I used, here's an export:

Code: 
# phpMyAdmin MySQL-Dump
# version 2.2.6
# [URL unfurl="true"]http://phpwizard.net/phpMyAdmin/[/URL]
# [URL unfurl="true"]http://www.phpmyadmin.net/[/URL] (download page)
#
# Host: localhost
# Generation Time: Jan 13, 2005 at 12:09 PM
# Server version: 3.23.49
# PHP Version: 4.1.2
# Database : `Tester`
# --------------------------------------------------------

#
# Table structure for table `tbl_stepone`
#

CREATE TABLE tbl_stepone (
  stepone_index int(11) NOT NULL auto_increment,
  stepone_name text NOT NULL,
  PRIMARY KEY  (stepone_index)
) TYPE=MyISAM;

#
# Dumping data for table `tbl_stepone`
#

INSERT INTO tbl_stepone VALUES (1, 'RED');
INSERT INTO tbl_stepone VALUES (2, 'BLUE');
INSERT INTO tbl_stepone VALUES (3, 'GREEN');
# --------------------------------------------------------

#
# Table structure for table `tbl_steptwo`
#

CREATE TABLE tbl_steptwo (
  steptwo_index int(11) NOT NULL auto_increment,
  steptwo_parent int(11) NOT NULL default '0',
  steptwo_name text NOT NULL,
  PRIMARY KEY  (steptwo_index)
) TYPE=MyISAM;

#
# Dumping data for table `tbl_steptwo`
#

INSERT INTO tbl_steptwo VALUES (1, 1, 'R');
INSERT INTO tbl_steptwo VALUES (2, 1, 'E');
INSERT INTO tbl_steptwo VALUES (3, 1, 'D');
INSERT INTO tbl_steptwo VALUES (4, 2, 'B');
INSERT INTO tbl_steptwo VALUES (5, 2, 'L');
INSERT INTO tbl_steptwo VALUES (6, 2, 'U');
INSERT INTO tbl_steptwo VALUES (7, 2, 'E');
INSERT INTO tbl_steptwo VALUES (8, 3, 'G');
INSERT INTO tbl_steptwo VALUES (9, 3, 'R');
INSERT INTO tbl_steptwo VALUES (10, 3, 'E');
INSERT INTO tbl_steptwo VALUES (11, 3, 'E');
INSERT INTO tbl_steptwo VALUES (12, 3, 'N');

Put the two tables into whatever database you're connecting to, and it should work nicely. You can always drop the tables when you're done testing.
 
Upvote 0 Downvote
That looks great I think I even understand it, will try it

out first thing tomorrow will let you know how I get on

with it.

Thanks alot HMarcBower

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Join two mysql tables for populate datatable
Replies
3
Views
328
spamjim
spamjim
PeDa
  • Locked
  • Question
prepend row to two dimensional array 1
Replies
4
Views
284
PeDa
PeDa
tyutghf
  • Locked
  • Question
one array from two data sources 1
Replies
4
Views
109
tyutghf
tyutghf
someoneneedshelps
  • Locked
  • Question
enter two submits from a form 1
Replies
6
Views
141
someoneneedshelps
someoneneedshelps
southbeach
  • Locked
  • Question
wsdl problem - part two - PHP to .NET issues
Replies
1
Views
77
southbeach
southbeach

Part and Inventory Search

Sponsor

Back
Top