Jump to content

Recommended Posts

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

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

 

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.