Page 1 of 1

Select box pulling from sql database WITHOUT refresh!

Posted: Sat Nov 24, 2007 8:42 pm
by FireElement
The following script works perfectly! Its a good script I created it yesterday and today!

There is nothing wrong with it accept I get told by mozarile that I should be using "getElementById(' ')"...

I am not the greatest with javascript am pretty average to be honest and I am not very experenced in it. I was wondering. If anyone can point out why not just putting the form name in and changing it to "getElementById(' ')" is better? I mean does it really matter in this script... its just is w3c spec... So I would like to have it in... any ideas on how I could incoprate it.

I know how it works and its fine in IE when I change all form names to it but in motarilla ironically the error consol that told me to change it dont like it. maybe its because am passing the form name a lot in to functions... I not sure. Maybe I should add document.getElementById \( ' ' \) in or something? Anytips would be great Just spent enough time on this and as far as am conserned it works just would like to improve it thats all....

Code: Select all

<?php 

require("../connection.php");

$tbl_name_1="currency"; // Table name
$tbl_name_2="country"; // Table name
$tbl_name_3="categories"; // Table name
$tbl_name_4="sub_categories"; // Table name
$tbl_name_5="sub_sub_categories"; // Table name
$tbl_name_6="cities";// Table name

// Connect to server and select databse.
mysql_connect("$host", "$username", "$password")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB"); 

            
//select from table 2
$sql="SELECT * FROM $tbl_name_2 ORDER BY printable_name";
$result=mysql_query($sql);

$count=1;
while($rows=mysql_fetch_array($result)){ 
  $country_name=$rows['printable_name'];
  $country[$count]="$country_name";
  $count++;
}// Exit             
   
 //select from table 3
$sql="SELECT * FROM $tbl_name_3 ORDER BY category";
$result=mysql_query($sql);

$count=1;
while($rows=mysql_fetch_array($result)){ 
  $category_name=$rows['category'];
  $category[$count]="$category_name";
  $count++;
}// Exit 

 //select from table 4
$sql="SELECT * FROM $tbl_name_4 ORDER BY sub_category";
$result=mysql_query($sql);

$count=1;
while($rows=mysql_fetch_array($result)){ 
  $sub_category_name=$rows['sub_category'];
  $category_under=$rows['category_under'];
  $subcategory[$count]=$sub_category_name;
  $subcategoryUnder[$count]=$category_under;
  $count++;
}// Exit 

 //select from table 5
$sql="SELECT * FROM $tbl_name_5 ORDER BY sub_category";
$result=mysql_query($sql);

$count=1;
while($rows=mysql_fetch_array($result)){ 
  $sub_sub_category_name=$rows['sub_category'];
  $category_under=$rows['category_under'];
  $subsubcategory[$count]=$sub_sub_category_name;
  $subsubcategoryUnder[$count]=$category_under;
  $count++;
}// Exit 

 //select from table 6
$sql="SELECT * FROM $tbl_name_6 ORDER BY city";
$result=mysql_query($sql);

$count=1;
while($rows=mysql_fetch_array($result)){ 
  $city_name=$rows['city'];
  $country_under=$rows['country'];
  $city[$count]=$city_name;
  $countryUnder[$count]=$country_under;
  $count++;
}// Exit 


?>

<html>
<head>

/////////////////////////////////////////////////////////////////////////////////
This code was writen by Stephen James Kelly, Bradford, England.
////////////////////////////////////////////////////////////////////////////////

<SCRIPT>


// this function is used to fill the country list on load
function fillCountry() { 
 
 <? 
 $count=1;
 while ($count <= (sizeof($country))) {
    $country_name=$country[$count];
    echo "addOption(document.drop_list.Country, \"$country_name\", \"$country_name\", \"\"); \n\r";
    $count++;
  }
  ?>
}


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

 <? 
 $count=1;
 while ($count <= (sizeof($category))) {
    $catagory=$category[$count];
    echo "addOption(document.drop_list.Category, \"$catagory\", \"$catagory\", \"\"); \n\r";
    $count++;
  }
  ?>
}

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

  removeAllOptions(document.drop_list.SubCat);
  addOption(document.drop_list.SubCat, "null", "-select-", "");
  addOption(document.drop_list.SubCat, "null", "----- ----- ----- ----- ----- -----", "");
  removeAllOptions(document.drop_list.SubSubCat);
  addOption(document.drop_list.SubSubCat, "null", "-select-", "");
  addOption(document.drop_list.SubSubCat, "null", "----- ----- ----- ----- ----- -----", "");
  
  
  <? 
   $count=1;
   while ($count <= (sizeof($subcategory))) {
     $subcatagory1=$subcategory[$count];
     $subcatagoryUnder1=$subcategoryUnder[$count];
    
     echo "if (document.drop_list.Category.value == '$subcatagoryUnder1'){ \n\r";
     echo "addOption(document.drop_list.SubCat, \"$subcatagory1\", \"$subcatagory1\", \"\"); \n\r";
     echo "disableIt(document.drop_list.SubCat);";
     
     echo "document.drop_list.SubCat.style.visibility='visible';";
     echo "SubCatDiv.style.display='block';";
     echo "document.drop_list.type_sub_category.style.visibility='hidden';";
     echo "TypeSubCatDiv.style.display='none';";
     
     echo "} \n\r";
     
     $count++;
   }
  ?>
  
  disableIt(document.drop_list.SubCat);
  disableIt(document.drop_list.SubSubCat);
  switchSelectForInput(document.drop_list.Category,document.drop_list.SubCat, SubCatDiv,document.drop_list.type_sub_category,TypeSubCatDiv);
  
}

function SelectSubSubCat(){
// ON selection of SubCat this function will work

  removeAllOptions(document.drop_list.SubSubCat);
  addOption(document.drop_list.SubSubCat, "null", "-select-", "");
  addOption(document.drop_list.SubSubCat, "null", "----- ----- ----- ----- ----- -----", "");
  
  <? 
   $count=1;
   while ($count <= (sizeof($subsubcategory))) {
     $subsubcatagory1=$subsubcategory[$count];
     $subsubcatagoryUnder1=$subsubcategoryUnder[$count];
     
     echo "if (document.drop_list.SubCat.value == '$subsubcatagoryUnder1'){ \n\r";
     echo "addOption(document.drop_list.SubSubCat, \"$subsubcatagory1\", \"$subsubcatagory1\", \"\"); \n\r";
     echo "disableIt(document.drop_list.SubSubCat);";
     echo "} \n\r";
     
     $count++;
   }
  ?>
  disableIt(document.drop_list.SubSubCat);
}

function selectcity() {
// ON selection of category this function will work

  removeAllOptions(document.drop_list.city);
  addOption(document.drop_list.city, "null", "-select-", "");
  addOption(document.drop_list.city, "null", "----- ----- ----- ----- ----- -----", "");
  
  <? 
  

   $count=1;
   $CityCount=sizeof($city);
   while ($count <= $CityCount) {
     $cityname=$city[$count];
     $the_country_Under=$countryUnder[$count];
 
     echo "if (document.drop_list.Country.value == '$the_country_Under') { \n\r";
     echo "addOption(document.drop_list.city, \"$cityname\", \"$cityname\", \"\"); \n\r";
     echo "disableIt(document.drop_list.city);";
     echo "} \n\r";
     
     $count++;
   }
  ?>
  disableIt(document.drop_list.city);
}


////////////////// 

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

//if you change the form name then you will need to change it here to
function disableIt(selectbox)
{  

	if (selectbox.options.length < 3)
	{
		selectbox.disabled=true; 
	} 	
	
	if (selectbox.options.length > 2)
	{
		selectbox.disabled=false; 
	} 
}

function switchSelectForInput(SelectboxUsing,selectboxChange, selectboxChangeDivName,InputChangingTo,InputChangingToDivName) {

	if (selectboxChange.disabled == true )  { 
    if(SelectboxUsing.value != "null" ) {
      if (SelectboxUsing.value != "" ) {
        selectboxChange.style.visibility='hidden';
        selectboxChangeDivName.style.display='none';
        InputChangingTo.style.visibility='visible';
        InputChangingToDivName.style.display='block';
      }
    }
  }
  
}

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

	selectbox.options.add(optn);
}


function onloadFunctionsCall()
{
  fillCategory();
  fillCountry();
  disableIt(document.drop_list.SubCat);
  disableIt(document.drop_list.SubSubCat);
  disableIt(document.drop_list.city);
}

</SCRIPT>


</head>
<body onload="onloadFunctionsCall()">

<FORM name="drop_list" action="test-cat-select.php" method="POST" >
<fieldset  style="width:330;">		
<legend>Category Select</legend>

<br>

<div align="center">
<SELECT  NAME="Category" style="width:300px;" onChange="SelectSubCat();" >
<Option value="null" selected=\"selected\">-select-</option>
<option value=\"null\">----- ----- ----- ----- ----- -----</option>
</SELECT>

<br><br>

<div style="display:block;" id="SubCatDiv" Name="SubCatDiv" >
<SELECT id="SubCat" style="visibility:visible;width:300px;" NAME="SubCat" onChange="SelectSubSubCat();">
<Option value="null" selected=\"selected\">-select-</option>
<option value=\"null\">----- ----- ----- ----- ----- -----</option>
</SELECT>
</div>

<div style="display:none;" id="TypeSubCatDiv" Name="TypeSubCatDiv" >
<input type="text" style="width:300px;" name="type_sub_category" style="visibility:hidden;">
</div>

<br>

<SELECT id="SubSubCat" style="width:300px;" NAME="SubSubCat">
<Option value="null" selected=\"selected\">-select-</option>
<option value=\"null\">----- ----- ----- ----- ----- -----</option>
</SELECT>

<br><br>
</div>
</fieldset>	

<br><br>

<fieldset style="width:330;">		
<legend>Location Select</legend>
<div align="center">
<br>
<SELECT  NAME="Country" style="width:300px;" onChange="selectcity()" >
<Option value="null" selected=\"selected\">-select-</option>
<option value=\"null\">----- ----- ----- ----- ----- -----</option>
<option value="United States">United States</option> 
<option value="Canada">Canada</option> 
<option value="United Kingdom" >United Kingdom</option>
<option value="Ireland" >Ireland</option>
<option value="Australia" >Australia</option>
<option value="New Zealand" >New Zealand</option>
<option value="null">----- ----- ----- ----- ----- -----</option>
</SELECT>
<br><br>
<SELECT id="city" style="width:300px;" NAME="city">
<Option value="null" selected=\"selected\">-select-</option>
<option value=\"null\">----- ----- ----- ----- ----- -----</option>
</SELECT>
<br><br>
</div>
</fieldset><br>
<input type="submit" onclick="submit();" name="submit" value="submit">
</form>


</body>
</html>
<?php mysql_close(); ?>

Posted: Sat Nov 24, 2007 11:55 pm
by s.dot
I believe if you add id="" to your tags, it will be okay. IE will let you get away with using names, but other browsers expect id's.

Thanks

Posted: Sun Nov 25, 2007 7:01 am
by FireElement
This is true I had not notice not all of them have Id and I read somewhere that id also works on name tags in IE so be careful...

Thanks will try that!

Posted: Sun Nov 25, 2007 7:38 am
by FireElement
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


I tried adding id to all my selects and making sure they was correct name. This works perfect in IE but not in mozarilla?? Its odd?

Code: Select all

<SCRIPT>


// this function is used to fill the country list on load
function fillCountry() { 
 
 <? 
 $count=1;
 while ($count <= (sizeof($country))) {
    $country_name=$country[$count];
    echo "addOption(document.getElementById('Country'), \"$country_name\", \"$country_name\", \"\"); \n\r";
    $count++;
  }
  ?>
}


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

 <? 
 $count=1;
 while ($count <= (sizeof($category))) {
    $catagory=$category[$count];
    echo "addOption(document.getElementById('Category'), \"$catagory\", \"$catagory\", \"\"); \n\r";
    $count++;
  }
  ?>
}

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

  removeAllOptions(document.getElementById('SubCat'));
  addOption(document.getElementById('SubCat'), "null", "-select-", "");
  addOption(document.getElementById('SubCat'), "null", "----- ----- ----- ----- ----- -----", "");
  removeAllOptions(document.getElementById('SubSubCat'));
  addOption(document.getElementById('SubSubCat'), "null", "-select-", "");
  addOption(document.getElementById('SubSubCat'), "null", "----- ----- ----- ----- ----- -----", "");
  
  
  <? 
   $count=1;
   while ($count <= (sizeof($subcategory))) {
     $subcatagory1=$subcategory[$count];
     $subcatagoryUnder1=$subcategoryUnder[$count];
    
     echo "if (document.getElementById('Category').value == '$subcatagoryUnder1'){ \n\r";
     echo "addOption(document.getElementById('SubCat'), \"$subcatagory1\", \"$subcatagory1\", \"\"); \n\r";
     echo "disableIt(document.getElementById('SubCat'));";
     
     echo "document.getElementById('SubCat').style.visibility='visible';";
     echo "SubCatDiv.style.display='block';";
     echo "document.getElementById('type_sub_category').style.visibility='hidden';";
     echo "TypeSubCatDiv.style.display='none';";
     
     echo "} \n\r";
     
     $count++;
   }
  ?>
  
  disableIt(document.getElementById('SubCat'));
  disableIt(document.getElementById('SubSubCat'));
  switchSelectForInput(document.getElementById('Category'), document.getElementById('SubCat'), SubCatDiv,document.getElementById('type_sub_category'),TypeSubCatDiv);
  
}

function SelectSubSubCat(){
// ON selection of category this function will work

  removeAllOptions(document.getElementById('SubSubCat'));
  addOption(document.getElementById('SubSubCat'), "null", "-select-", "");
  addOption(document.getElementById('SubSubCat'), "null", "----- ----- ----- ----- ----- -----", "");
  
  <? 
   $count=1;
   while ($count <= (sizeof($subsubcategory))) {
     $subsubcatagory1=$subsubcategory[$count];
     $subsubcatagoryUnder1=$subsubcategoryUnder[$count];
     
     echo "if (document.getElementById('SubCat').value == '$subsubcatagoryUnder1'){ \n\r";
     echo "addOption(document.getElementById('SubSubCat'), \"$subsubcatagory1\", \"$subsubcatagory1\", \"\"); \n\r";
     echo "disableIt(document.getElementById('SubSubCat'));";
     echo "} \n\r";
     
     $count++;
   }
  ?>
  disableIt(document.getElementById('SubSubCat'));
}

function selectcity() {
// ON selection of category this function will work

  removeAllOptions(document.getElementById('city'));
  addOption(document.getElementById('city'), "null", "-select-", "");
  addOption(document.getElementById('city'), "null", "----- ----- ----- ----- ----- -----", "");
  
  <? 
  

   $count=1;
   $CityCount=sizeof($city);
   while ($count <= $CityCount) {
     $cityname=$city[$count];
     $the_country_Under=$countryUnder[$count];
 
     echo "if (document.getElementById('Country').value == '$the_country_Under') { \n\r";
     echo "addOption(document.getElementById('city'), \"$cityname\", \"$cityname\", \"\"); \n\r";
     echo "disableIt(document.getElementById('city'));";
     echo "} \n\r";
     
     $count++;
   }
  ?>
  disableIt(document.getElementById('city'));
}


////////////////// 

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

//if you change the form name then you will need to change it here to
function disableIt(selectbox)
{  

	if (selectbox.options.length < 3)
	{
		selectbox.disabled=true; 
	} 	
	
	if (selectbox.options.length > 2)
	{
		selectbox.disabled=false; 
	} 
}

function switchSelectForInput(SelectboxUsing,selectboxChange,selectboxChangeDivName,InputChangingTo,InputChangingToDivName) {

	if (selectboxChange.disabled == true )  { 
    if(SelectboxUsing.value != "null" ) {
      if (SelectboxUsing.value != "" ) {
        selectboxChange.style.visibility='hidden';
        selectboxChangeDivName.style.display='none';
        InputChangingTo.style.visibility='visible';
        InputChangingToDivName.style.display='block';
      }
    }
  }
  
}

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

	selectbox.options.add(optn);
}


function onloadFunctionsCall()
{
  fillCategory();
  fillCountry();
  disableIt(document.getElementById('SubCat'));
  disableIt(document.getElementById('SubSubCat'));
  disableIt(document.getElementById('city'));
}

</SCRIPT>

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

woops

Posted: Sun Nov 25, 2007 7:41 am
by FireElement
Shcool boy error... I forgot to add id to the input box and then tried to pass it by id!

Thanks it works fine now not a bug in sight! :D :D :D

Posted: Sun Nov 25, 2007 7:46 am
by FireElement
Was thinking maybe I could just pass the id name now to rather then the whole line... document.getElementById('SubCat'). Make things easier and neater will try that now. Just well coz that would be perfect if I could just put SubCat! Rather then that mouth full! haha :D

Later

dynamic select box calling sql databases WITHOUT refresh!

Posted: Sun Nov 25, 2007 8:49 am
by FireElement
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


Ok you need to get the first post code put the script bit in over script part and body part over body part of first post. Then you need to make a connection php file which has your connection info in. Also you need to make the following databases and get the info... or create it up to you.

All you have to do is make up a country city sql with the list of countrys and there cities. Also if you want the category bit to work you will have to make a database that stores categories Eg: id, category. Then sub_categories one Eg: id, sub_category, category_under. Final one called sub_sub_categories Eg: Id, sub_category, category_under. This is like sub set maths basically.  

If you would like my country and cities list. Then post and I might put them up later as attachments... but sure you can find some on the net! 

For example country: 

[syntax="sql"]
CREATE TABLE `country` (
  `iso` char(2) collate latin1_general_ci NOT NULL,
  `name` varchar(80) collate latin1_general_ci NOT NULL,
  `printable_name` varchar(80) collate latin1_general_ci NOT NULL,
  `iso3` char(3) collate latin1_general_ci default NULL,
  `numcode` smallint(6) default NULL,
  PRIMARY KEY  (`iso`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;
For example cities:

Code: Select all

CREATE TABLE `cities` (
  `unique_id` mediumint(4) NOT NULL default '0',
  `local_id` mediumint(3) NOT NULL default '0',
  `city` varchar(65) NOT NULL default '',
  `cc` char(2) NOT NULL default '',
  `country` varchar(45) NOT NULL,
  PRIMARY KEY  (`unique_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
Ok here is the new script part. Anyone can use this script, wake my name on it to would be cool, but whatever![/syntax]

Code: Select all

<SCRIPT>
/////////////////////////////////////////////////////////////////////////////////
This code was writen by Stephen James Kelly, Bradford, England.
////////////////////////////////////////////////////////////////////////////////

// this function is used to fill the country list on load
function fillCountry() { 
 
 <? 
 $count=1;
 while ($count <= (sizeof($country))) {
    $country_name=$country[$count];
    echo "addOption('Country', \"$country_name\", \"$country_name\", \"\"); \n\r";
    $count++;
  }
  ?>
}


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

 <? 
 $count=1;
 while ($count <= (sizeof($category))) {
    $catagory=$category[$count];
    echo "addOption('Category', \"$catagory\", \"$catagory\", \"\"); \n\r";
    $count++;
  }
  ?>
}

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

  removeAllOptions('SubCat');
  addOption('SubCat', "null", "-select-", "");
  addOption('SubCat', "null", "----- ----- ----- ----- ----- -----", "");
  removeAllOptions('SubSubCat');
  addOption('SubSubCat', "null", "-select-", "");
  addOption('SubSubCat', "null", "----- ----- ----- ----- ----- -----", "");
  
  
  <? 
   $count=1;
   while ($count <= (sizeof($subcategory))) {
     $subcatagory1=$subcategory[$count];
     $subcatagoryUnder1=$subcategoryUnder[$count];
    
     echo "if (document.getElementById('Category').value == '$subcatagoryUnder1'){ \n\r";
     echo "addOption('SubCat', \"$subcatagory1\", \"$subcatagory1\", \"\"); \n\r";
     echo "disableIt('SubCat');";
     
     echo "switchSelectOrInputOn('Category','SubCat',SubCatDiv,'type_sub_category',TypeSubCatDiv);";
     
     echo "} \n\r";
     
     $count++;
   }
  ?>
  
  disableIt('SubCat');
  disableIt('SubSubCat');
  switchSelectOrInputOn('Category','SubCat',SubCatDiv,'type_sub_category',TypeSubCatDiv);
  
}

function SelectSubSubCat(){
// ON selection of SubCat this function will work

  removeAllOptions('SubSubCat');
  addOption('SubSubCat', "null", "-select-", "");
  addOption('SubSubCat', "null", "----- ----- ----- ----- ----- -----", "");
  
  <? 
   $count=1;
   while ($count <= (sizeof($subsubcategory))) {
     $subsubcatagory1=$subsubcategory[$count];
     $subsubcatagoryUnder1=$subsubcategoryUnder[$count];
     
     echo "if (document.getElementById('SubCat').value == '$subsubcatagoryUnder1'){ \n\r";
     echo "addOption('SubSubCat', \"$subsubcatagory1\", \"$subsubcatagory1\", \"\"); \n\r";
     echo "disableIt('SubSubCat');";
     echo "} \n\r";
     
     $count++;
   }
  ?>
  disableIt('SubSubCat');
}

function selectcity() {
// ON selection of Country this function will work

  removeAllOptions('city');
  addOption('city', "null", "-select-", "");
  addOption('city', "null", "----- ----- ----- ----- ----- -----", "");
  
  <? 
  

   $count=1;
   $CityCount=sizeof($city);
   while ($count <= $CityCount) {
     $cityname=$city[$count];
     $the_country_Under=$countryUnder[$count];
 
     echo "if (document.getElementById('Country').value == '$the_country_Under') { \n\r";
     echo "addOption('city', \"$cityname\", \"$cityname\", \"\"); \n\r";
     echo "disableIt('city');";
     echo "} \n\r";
     
     $count++;
   }
  ?>
  disableIt('city');
}


////////////////// 

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

//if you change the form name then you will need to change it here to
function disableIt(selectbox)
{  

	if (document.getElementById(selectbox).options.length < 3)
	{
		document.getElementById(selectbox).disabled=true; 
	} 	
	
	if (document.getElementById(selectbox).options.length > 2)
	{
		document.getElementById(selectbox).disabled=false; 
	} 
}

function switchSelectOrInputOn(SelectboxUsing,selectboxChange, selectboxChangeDivName,InputChangingTo,InputChangingToDivName) {

	if (document.getElementById(selectboxChange).disabled == true )  { 
    if(document.getElementById(SelectboxUsing).value != "null" ) {
      if (document.getElementById(SelectboxUsing).value != "" ) {
        document.getElementById(selectboxChange).style.visibility='hidden';
        selectboxChangeDivName.style.display='none';
        document.getElementById(InputChangingTo).style.visibility='visible';
        InputChangingToDivName.style.display='block';
      }
    }
  }
  
  if (document.getElementById(selectboxChange).disabled == false )  { 
     document.getElementById(selectboxChange).style.visibility='visible';
     selectboxChangeDivName.style.display='block';
     document.getElementById(InputChangingTo).style.visibility='hidden';
     InputChangingToDivName.style.display='none';
  }
}

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

	document.getElementById(selectbox).options.add(optn);
}


function onloadFunctionsCall()
{
  fillCategory();
  fillCountry();
  disableIt('SubCat');
  disableIt('SubSubCat');
  disableIt('city');
}

</SCRIPT>
body part with id tags!

Code: Select all

<body onload="onloadFunctionsCall()">

<FORM name="passTipsForm" action="test-cat-select.php" method="POST" >
<fieldset  style="width:330;">		
<legend>Category Select</legend>

<br>

<div align="center">
<SELECT id="Category" NAME="Category" style="width:300px;" onChange="SelectSubCat();" >
<Option value="null" selected=\"selected\">-select-</option>
<option value=\"null\">----- ----- ----- ----- ----- -----</option>
</SELECT>

<br><br>

<div style="display:block;" id="SubCatDiv" Name="SubCatDiv" >
<SELECT id="SubCat" style="visibility:visible;width:300px;" NAME="SubCat" onChange="SelectSubSubCat();">
<Option value="null" selected=\"selected\">-select-</option>
<option value=\"null\">----- ----- ----- ----- ----- -----</option>
</SELECT>
</div>

<div style="display:none;" id="TypeSubCatDiv" Name="TypeSubCatDiv" >
<input type="text" style="width:300px;"  id="type_sub_category" name="type_sub_category" style="visibility:hidden;">
</div>

<br>

<SELECT id="SubSubCat" style="width:300px;" NAME="SubSubCat">
<Option value="null" selected=\"selected\">-select-</option>
<option value=\"null\">----- ----- ----- ----- ----- -----</option>
</SELECT>

<br><br>
</div>
</fieldset>	

<br><br>

<fieldset style="width:330;">		
<legend>Location Select</legend>
<div align="center">
<br>
<SELECT id="Country" NAME="Country" style="width:300px;" onChange="selectcity()" >
<Option value="null" selected=\"selected\">-select-</option>
<option value=\"null\">----- ----- ----- ----- ----- -----</option>
<option value="United States">United States</option> 
<option value="Canada">Canada</option> 
<option value="United Kingdom" >United Kingdom</option>
<option value="Ireland" >Ireland</option>
<option value="Australia" >Australia</option>
<option value="New Zealand" >New Zealand</option>
<option value="null">----- ----- ----- ----- ----- -----</option>
</SELECT>
<br><br>
<SELECT id="city" style="width:300px;" NAME="city">
<Option value="null" selected=\"selected\">-select-</option>
<option value=\"null\">----- ----- ----- ----- ----- -----</option>
</SELECT>
<br><br>
</div>
</fieldset><br>
<input type="submit" onclick="submit();" name="submit" value="submit">
</form>


</body>

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Final verson

Posted: Sun Nov 25, 2007 6:28 pm
by FireElement
I noticed some slight bugs also updated it so it now has options to allow a other box on any category that does not have a select. Enjoy!

Full code

Code: Select all

<?php 

require("../connection.php");

$tbl_name_1="currency"; // Table name
$tbl_name_2="country"; // Table name
$tbl_name_3="categories"; // Table name
$tbl_name_4="sub_categories"; // Table name
$tbl_name_5="sub_sub_categories"; // Table name
$tbl_name_6="cities";// Table name

// Connect to server and select databse.
mysql_connect("$host", "$username", "$password")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB"); 

            
//select from table 2
$sql="SELECT * FROM $tbl_name_2 ORDER BY printable_name";
$result=mysql_query($sql);

$count=1;
while($rows=mysql_fetch_array($result)){ 
  $country_name=$rows['printable_name'];
  $country[$count]="$country_name";
  $count++;
}// Exit             
   
 //select from table 3
$sql="SELECT * FROM $tbl_name_3 ORDER BY category";
$result=mysql_query($sql);

$count=1;
while($rows=mysql_fetch_array($result)){ 
  $category_name=$rows['category'];
  $category[$count]="$category_name";
  $count++;
}// Exit 

 //select from table 4
$sql="SELECT * FROM $tbl_name_4 ORDER BY sub_category";
$result=mysql_query($sql);

$count=1;
while($rows=mysql_fetch_array($result)){ 
  $sub_category_name=$rows['sub_category'];
  $category_under=$rows['category_under'];
  $subcategory[$count]=$sub_category_name;
  $subcategoryUnder[$count]=$category_under;
  $count++;
}// Exit 

 //select from table 5
$sql="SELECT * FROM $tbl_name_5 ORDER BY sub_category";
$result=mysql_query($sql);

$count=1;
while($rows=mysql_fetch_array($result)){ 
  $sub_sub_category_name=$rows['sub_category'];
  $category_under=$rows['category_under'];
  $subsubcategory[$count]=$sub_sub_category_name;
  $subsubcategoryUnder[$count]=$category_under;
  $count++;
}// Exit 

 //select from table 6
$sql="SELECT * FROM $tbl_name_6 ORDER BY city";
$result=mysql_query($sql);

$count=1;
while($rows=mysql_fetch_array($result)){ 
  $city_name=$rows['city'];
  $country_under=$rows['country'];
  $city[$count]=$city_name;
  $countryUnder[$count]=$country_under;
  $count++;
}// Exit 


?>

<html>
<head>

<SCRIPT>

///////////////////////////////////////////////////////////////////////////////////////
Code writen by Stephen James Kelly! Bradford, England! 
//////////////////////////////////////////////////////////////////////////////////////

// this function is used to fill the country list on load
function fillCountry() { 
 
 <? 
 $count=1;
 while ($count <= (sizeof($country))) {
    $country_name=$country[$count];
    echo "addOption('Country', \"$country_name\", \"$country_name\", \"\"); \n\r";
    $count++;
  }
  ?>
}


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

 <? 
 $count=1;
 while ($count <= (sizeof($category))) {
    $catagory=$category[$count];
    echo "addOption('Category', \"$catagory\", \"$catagory\", \"\"); \n\r";
    $count++;
  }
  ?>
}

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

  removeAllOptions('SubCat');
  addOption('SubCat', "null", "-select-", "");
  addOption('SubCat', "null", "----- ----- ----- ----- ----- -----", "");
  removeAllOptions('SubSubCat');
  addOption('SubSubCat', "null", "-select-", "");
  addOption('SubSubCat', "null", "----- ----- ----- ----- ----- -----", "");
  
  
  <? 
   $count=1;
   while ($count <= (sizeof($subcategory))) {
     $subcatagory1=$subcategory[$count];
     $subcatagoryUnder1=$subcategoryUnder[$count];
    
     echo "if (document.getElementById('Category').value == '$subcatagoryUnder1'){ \n\r";
     echo "addOption('SubCat', \"$subcatagory1\", \"$subcatagory1\", \"\"); \n\r";
     echo "disableIt('SubCat');";
     
     echo "switchSelectOrInputOn('Category','SubCat',SubCatDiv,'type_sub_category',TypeSubCatDiv,'null');";
     
     echo "} \n\r";
     
     $count++;
   }
  ?>
  
  disableIt('SubCat');
  disableIt('SubSubCat');
  switchSelectOrInputOn('Category','SubCat',SubCatDiv,'type_sub_category',TypeSubCatDiv,'null');
 //switchSelectOrInputOn('SubCat','SubSubCat',SubSubCatDiv,'SubSubCatInput',SubSubCatInputDiv,'Category');
}

// ON selection of Subcat this function will work
function SelectSubSubCat(){

  removeAllOptions('SubSubCat');
  addOption('SubSubCat', "null", "-select-", "");
  addOption('SubSubCat', "null", "----- ----- ----- ----- ----- -----", "");
  
  <? 
   $count=1;
   while ($count <= (sizeof($subsubcategory))) {
     $subsubcatagory1=$subsubcategory[$count];
     $subsubcatagoryUnder1=$subsubcategoryUnder[$count];
     
     echo "if (document.getElementById('SubCat').value == '$subsubcatagoryUnder1'){ \n\r";
     echo "addOption('SubSubCat', \"$subsubcatagory1\", \"$subsubcatagory1\", \"\"); \n\r";
     echo "disableIt('SubSubCat');";
     
    // echo "switchSelectOrInputOn('SubCat','SubSubCat',SubSubCatDiv,'SubSubCatInput',SubSubCatInputDiv,'Category');";
     
     echo "} \n\r";
     
     $count++;
   }
  ?>
  disableIt('SubSubCat');
 //switchSelectOrInputOn('SubCat','SubSubCat',SubSubCatDiv,'SubSubCatInput',SubSubCatInputDiv,'Category');
}

// ON selection of country this function will work
function selectcity() {

  removeAllOptions('city');
  addOption('city', "null", "-select-", "");
  addOption('city', "null", "----- ----- ----- ----- ----- -----", "");
  
  <? 
  

   $count=1;
   $CityCount=sizeof($city);
   while ($count <= $CityCount) {
     $cityname=$city[$count];
     $the_country_Under=$countryUnder[$count];
 
     echo "if (document.getElementById('Country').value == '$the_country_Under') { \n\r";
     echo "addOption('city', \"$cityname\", \"$cityname\", \"\"); \n\r";
     echo "disableIt('city');";
     echo "} \n\r";
     
     $count++;
   }
  ?>
  disableIt('city');
}


////////////////// 

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

//if you change the form name then you will need to change it here to
function disableIt(selectbox)
{  

	if (document.getElementById(selectbox).options.length < 3)
	{
		document.getElementById(selectbox).disabled=true; 
	} 	
	
	if (document.getElementById(selectbox).options.length > 2)
	{
		document.getElementById(selectbox).disabled=false; 
	} 
}

function switchSelectOrInputOn(SelectboxUsing,selectboxChange, selectboxChangeDivName,InputChangingTo, InputChangingToDivName,LayedSelectbox) {

//layed select box means if you have more then two select boxes you can make each one display an other box if wanted. 
//So you could if you wanted have any select boxes that make the other select box dissabled show an otherbox. 
//or you could set it to null if its not layed and there is only two boxes. 

  if (document.getElementById(SelectboxUsing).value == "null" ) {
     if (document.getElementById(selectboxChange).style.visibility=='hidden') {
        document.getElementById(selectboxChange).style.visibility='visible';
        selectboxChangeDivName.style.display='block';
        document.getElementById(InputChangingTo).style.visibility='hidden';
        InputChangingToDivName.style.display='none';
     }
  }
  
  if (document.getElementById(selectboxChange).disabled == true )  { 
    if (document.getElementById(SelectboxUsing).value != "null" ) {
      if (document.getElementById(SelectboxUsing).value != "" ) {
        document.getElementById(selectboxChange).style.visibility='hidden';
        selectboxChangeDivName.style.display='none';
        document.getElementById(InputChangingTo).style.visibility='visible';
        InputChangingToDivName.style.display='block';
      }
    }
  } 
  
  if (document.getElementById(LayedSelectbox).value == "none" ) {
     if (document.getElementById(selectboxChange).disabled == false )  { 
        document.getElementById(selectboxChange).style.visibility='visible';
        selectboxChangeDivName.style.display='block';
        document.getElementById(InputChangingTo).style.visibility='hidden';
        InputChangingToDivName.style.display='none';
     }
  } else {
    if (document.getElementById(selectboxChange).disabled == true )  { 
      if (document.getElementById(LayedSelectbox).value == 'null' || document.getElementById(SelectboxUsing).value == 'null' || document.getElementById(SelectboxUsing).style.visibility=='hidden') {
          document.getElementById(selectboxChange).style.visibility='visible';
          selectboxChangeDivName.style.display='block';
          document.getElementById(InputChangingTo).style.visibility='hidden';
          InputChangingToDivName.style.display='none'; 
      }
    }
  }
  
}

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

	document.getElementById(selectbox).options.add(optn);
}


function onloadFunctionsCall()
{
  fillCategory();
  fillCountry();
  disableIt('SubCat');
  disableIt('SubSubCat');
  disableIt('city');
}

</SCRIPT>


</head>
<body onload="onloadFunctionsCall()">

<FORM name="passTipsForm" action="test-cat-select.php" method="POST" >
<fieldset  style="width:330;">		
<legend>Category Select</legend>

<br>

<div align="center">
<SELECT id="Category" NAME="Category" style="width:300px;" onChange="SelectSubCat();" >
<Option value="null" selected=\"selected\">-select-</option>
<option value="null">----- ----- ----- ----- ----- -----</option>
</SELECT>

<br><br>

<div style="display:block;" id="SubCatDiv" Name="SubCatDiv" >
<SELECT id="SubCat" style="visibility:visible;width:300px;" NAME="SubCat" onChange="SelectSubSubCat();">
<Option value="null" selected=\"selected\">-select-</option>
<option value="null">----- ----- ----- ----- ----- -----</option>
</SELECT>
</div>

<div style="display:none;" id="TypeSubCatDiv" Name="TypeSubCatDiv" >
<input type="text" style="width:300px;"  id="type_sub_category" name="type_sub_category" style="visibility:hidden;">
</div>

<br>
<div style="display:block;" id="SubSubCatDiv" Name="SubSubCatDiv" >
<SELECT id="SubSubCat" style="width:300px;" NAME="SubSubCat">
<Option value="null" selected=\"selected\">-select-</option>
<option value="null">----- ----- ----- ----- ----- -----</option>
</SELECT>
</div>

<div style="display:none;" id="SubSubCatInputDiv" Name="SubSubCatInputDiv" >
<input type="text" style="width:300px;"  id="SubSubCatInput" name="SubSubCatInput" style="visibility:hidden;">
</div>

<input type="hidden" id="null" name="null" value="none">

<br><br>
</div>
</fieldset>	

<br><br>

<fieldset style="width:330;">		
<legend>Location Select</legend>
<div align="center">
<br>
<SELECT id="Country" NAME="Country" style="width:300px;" onChange="selectcity()" >
<Option value="null" selected=\"selected\">-select-</option>
<option value="null">----- ----- ----- ----- ----- -----</option>
<option value="United States">United States</option> 
<option value="Canada">Canada</option> 
<option value="United Kingdom" >United Kingdom</option>
<option value="Ireland" >Ireland</option>
<option value="Australia" >Australia</option>
<option value="New Zealand" >New Zealand</option>
<option value="null">----- ----- ----- ----- ----- -----</option>
</SELECT>
<br><br>
<SELECT id="city" style="width:300px;" NAME="city">
<Option value="null" selected=\"selected\">-select-</option>
<option value="null">----- ----- ----- ----- ----- -----</option>
</SELECT>
<br><br>
</div>
</fieldset><br>
<input type="submit" onclick="submit();" name="submit" value="submit">
</form>


</body>
</html>
<?php mysql_close(); ?>