Dynamic Drop Menu & SQL Database

BillyMako · August 5, 2008

Hi,

I want to change this code i have so there is just a text field where the customer enters their postcode.

After entering their postcode i want it to populate the drop down menu with the corresponding suburbs.

Here is the code i have, at the moment you select something from the first drop down and then the second one is populated.

It gets all the data from an SQL table online.

index.html -------------------------------------------------------

<script language="javascript" src="list.php"></script>
</head>

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onLoad="fillCategory();">

<FORM name="drop_list" method="POST" >
<SELECT  NAME="Category" onChange="SelectSubCat();" >
<Option value="">Category</option>
</SELECT> 
<SELECT id="SubCat" NAME="SubCat">
<Option value="">SubCat</option>
</SELECT>
</form>

</body>

list.php ----------------------------------------------------------


require "config.php"; // database connection details 
echo "

function fillCategory(){ 
// this function is used to fill the category list on load

";

$q1=mysql_query("select * from category");
echo mysql_error();
while($nt1=mysql_fetch_array($q1)){
echo "addOption(document.drop_list.Category, '$nt1[cat_id]', '$nt1[category]');";
}// end of while
?>
} // end of JS function

function SelectSubCat(){
// ON or after selection of category this function will work

removeAllOptions(document.drop_list.SubCat);
addOption(document.drop_list.SubCat, "", "SubCat", "");

// Collect all element of subcategory for various cat_id 

<?
// let us collect all cat_id and then collect all subcategory for each cat_id
$q2=mysql_query("select distinct(cat_id)  from subcategory");
// In the above query you can collect cat_id from category table also. 
while($nt2=mysql_fetch_array($q2)){
//echo "$nt2[cat_id]";
echo "if(document.drop_list.Category.value == '$nt2[cat_id]'){";
$q3=mysql_query("select subcategory from subcategory where cat_id='$nt2[cat_id]'");
while($nt3=mysql_fetch_array($q3)){
echo "addOption(document.drop_list.SubCat,'$nt3[subcategory]', '$nt3[subcategory]');";


} // end of while loop
echo "}"; // end of JS if condition

}
?>




}
////////////////// 

function removeAllOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
	//selectbox.options.remove(i);
	selectbox.remove(i);
}
}


function addOption(selectbox, value, text )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;

selectbox.options.add(optn);
}

dumpt.txt -------------------------------------------------------

CREATE TABLE `category` (
  `cat_id` int(2) NOT NULL auto_increment,
  `category` varchar(25) NOT NULL default '',
  PRIMARY KEY  (`cat_id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;


-- 
-- Dumping data for table `category`
-- 

INSERT INTO `category` VALUES (1, 'Fruits');
INSERT INTO `category` VALUES (2, 'Colors');
INSERT INTO `category` VALUES (3, 'Games');
INSERT INTO `category` VALUES (4, 'Vehicles');

-- --------------------------------------------------------


-- 
-- Table structure for table `subcategory`
-- 


CREATE TABLE `subcategory` (
  `cat_id` int(2) NOT NULL default '0',
  `subcategory` varchar(25) NOT NULL default ''
) ENGINE=MyISAM DEFAULT CHARSET=latin1;


-- 
-- Dumping data for table `subcategory`
-- 


INSERT INTO `subcategory` VALUES (1, 'Mango');
INSERT INTO `subcategory` VALUES (1, 'Banana');
INSERT INTO `subcategory` VALUES (1, 'Orange');
INSERT INTO `subcategory` VALUES (1, 'Apple');
INSERT INTO `subcategory` VALUES (2, 'Red');
INSERT INTO `subcategory` VALUES (2, 'Blue');
INSERT INTO `subcategory` VALUES (2, 'Green');
INSERT INTO `subcategory` VALUES (2, 'Yellow');
INSERT INTO `subcategory` VALUES (3, 'Cricket');
INSERT INTO `subcategory` VALUES (3, 'Football');
INSERT INTO `subcategory` VALUES (3, 'Baseball');
INSERT INTO `subcategory` VALUES (3, 'Tennis');
INSERT INTO `subcategory` VALUES (4, 'Cars');
INSERT INTO `subcategory` VALUES (4, 'Trucks');
INSERT INTO `subcategory` VALUES (4, 'Blkes');
INSERT INTO `subcategory` VALUES (4, 'Train');

trq · August 5, 2008

And your question is?

BillyMako · August 5, 2008

I want to change it so the user types in their postcode and then the drop down menu is populated with the matching suburbs ready for selection.

I don't want the first field to be drop down i want it to be a text area field.

Please help!

revraz · August 5, 2008

Javascript if you want it dynamic.

BillyMako · August 5, 2008

To start how can i change the first selection to a text field where i can enter say "fruit" and then the menu is populated?

marcus · August 5, 2008

<input type="text" name="category" onKeyUp="SelectSubCat()">

BillyMako · August 5, 2008

Sorry that wont work

BillyMako · August 5, 2008

HELP!!!

BillyMako · August 6, 2008

to start with how can i type in the category i want selected say "vehicles" in a text fie;d and then the second drop down in populated????

revraz · August 6, 2008

again, javascript...

you are not getting answers because this is the PHP forum, not Javascript one.

BillyMako · August 6, 2008

I have a PHP problem. I cant retrieve the variable i am sending called cats to $catsb = $_POST['cats'];.

the process code -----------------------------------------------------------------------


require "config.php"; // database connection details 

$catsb = $_POST['cats'];

echo "

function fillCategory(){ 
// this function is used to fill the category list on load

";


?>
} // end of JS function

function SelectSubCat(){
// ON or after selection of category this function will work

removeAllOptions(document.drop_list.SubCat);
addOption(document.drop_list.SubCat, "", "SubCat", "");

// Collect all element of subcategory for various cat_id 

<?

$cat=1;


echo "if($cat == 1){";
$q3=mysql_query("select subcategory from subcategory where cat_id = '$catsb' ");
while($nt3=mysql_fetch_array($q3)){
echo "addOption(document.drop_list.SubCat,'$nt3[subcategory]', '$nt3[subcategory]');";


} // end of while loop
echo "}"; // end of JS if condition

//}
?>




}
////////////////// 

function removeAllOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
	//selectbox.options.remove(i);
	selectbox.remove(i);
}
}


function addOption(selectbox, value, text )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;

selectbox.options.add(optn);
}

The form --------------------------------------------------------------------

<script language="javascript" src="list.php"></script>
</head>

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onLoad="fillCategory();">

<FORM name="drop_list" method="POST" >
<input name="cats" type="text" onBlur="SelectSubCat();">
<SELECT id="SubCat" NAME="SubCat">
<Option value="">SubCat</option>
</SELECT>
</form>

----------------------------------------------------

What isn't it retrieving the value from the text field in the process page????

Sign In

Dynamic Drop Menu & SQL Database

Recommended Posts

BillyMako

Link to comment

Share on other sites

trq

Link to comment

Share on other sites

BillyMako

Link to comment

Share on other sites

revraz

Link to comment

Share on other sites

BillyMako

Link to comment

Share on other sites

marcus

Link to comment

Share on other sites

BillyMako

Link to comment

Share on other sites

BillyMako

Link to comment

Share on other sites

BillyMako

Link to comment

Share on other sites

revraz

Link to comment

Share on other sites

BillyMako

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information