Select box pulling from sql database WITHOUT refresh!
Posted: Sat Nov 24, 2007 8:42 pm
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....
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(); ?>