Jump to content

Dynamic Drop Menu & SQL Database

BillyMako

By BillyMako
in PHP Coding Help

Recommended Posts

BillyMako Member

BillyMako

Posted
Posted

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');

Link to comment
https://forums.phpfreaks.com/topic/118209-dynamic-drop-menu-sql-database/
Share on other sites
BillyMako Member

BillyMako

Posted
  • Author
Posted

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????

 

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.