chained listboxes 1

[dongbamage]

I would like a category listbox which is populated from my db, when I select a category I would like my subcategory lisbox to be dynamically populated from my db based upon which category was chosen.

I then would like my subsubcategory listbox to be dynamically populated from my db based upon which subcategory was chosen.

and then I then would like my subsubsubcategory listbox to be dynamically populated from my db based upon which subsubcategory was chosen.

I'm a noob to javascript so I'm finding this difficult, I have searched and searched but can only seem to find scripts for non db based listboxes that update each other...

please help!!!!

I'm going insane!

 

[chessbot]

So you want a separate page for each type in each stone? Ok, but my suggestion: use a server-side language and submit the form and have that page display the information.

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakesperean sonnet.

 

[idaryl]

Right now the products are here

http://www.merchantamerica.com/www.energystones.com/index.php

and the idea is to have the menus combine to go to the appropriate page in this cart (pain that it is - as you will see from the volume of product - and I'm still not done with THAT part yet - images etc) The provider does not support asp and I know nothing about php so i'm kinda stuck in javascript here.

• idaryl •

http://www.designedimage.com

•

 

[chessbot]

So you want to link to the correct page on that site? Which page: the expanded version? The add to cart page? The stone selector?

We could add a 3rd dimension to the array (or is it 4 now? 5?) to hold color, url pairs, but it would be easier to create a PHP page to convert them. If a list of [type][stone] => id pairs is amassed, this is very easy (PHP is very similar to Javascript).

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakesperean sonnet.

 

[idaryl]

The link opens the page in the cart EG:

http://www.merchantamerica.com/www.energystones.com/index.php?ba=product_enlarge&product=43601

and thats from a combined menu -- The first pulldown is the type of jewelry (necklace) and the second pulldown the type of stone (Agate) -- there are 15 stones per necklace - 15 per bracelet etc etc.

The 3rd dimension is for the dual stone arrangement where the Agate is top stone or Bottom (because there are 15 stones the different arrangements total to 225 different dual stone styles [15x15])

Ive tried other types of menus goto

http://www.idaryl.com/chained/index.html

but I'm running into all sorts of trouble

• idaryl •

http://www.designedimage.com

•

 

[chessbot]

So your page looks like this?

+----------------------------+
|Type of object (amulet, etc)|
+----------------------------+

+------------------------+  +---------------------------+
|Available stones for top|  |Available stones for bottom|
+------------------------+  +---------------------------+

+------------------------------------+
|Button to buy (links to the extended|
|version of the type, top stone,     |
|bottom stone combination)           |
+------------------------------------+

And you need to be able to specify each of these values individually?

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakesperean sonnet.

 

[idaryl]

yes that would do for the Dual stone amulets
+-----------------------+
|Type of object (amulet)|
+-----------------------+
+------------------------+  +---------------------------+
|Available stones for top|  |Available stones for bottom|
+------------------------+  +---------------------------+
+------------------------------------+
|Button to buy (links to the extended|
|version of the type, top stone,     |
|bottom stone combination)           |
+------------------------------------+

and for the rest...
+-------------------------+  +----------------------------+
|Type of object (necklace)|  |Available stones for object|
+-------------------------+  +----------------------------+
+------------------------------------+
|Button to buy (links to the extended|
|version of the type, top stone,     |
|bottom stone combination)           |
+------------------------------------+

• idaryl •

http://www.designedimage.com

•

 

[dongbamage]

Hi chessbot thanks for the reply!

I'm getting a Parse error: parse error, unexpected T_STRING, expecting ']' on line 39

Line 39 being:

tmp['value'] = {$cat['value']};

Here is the code you suggested:

<?
include ('/files/home3/munchexpress/Includes/db_connect.php');
$sql="SELECT CategoryID, Name FROM categories WHERE CategoryParentID = 0 AND Name <>'Top'";
$result=mysql_query($sql) or die ("dead");
$mainselect = array();
while($row=mysql_fetch_assoc($result))
{
$temp = array(
"value" => $row['CategoryID'],
"text" => $row['Name']
);
$mainselect[] = $temp;
}


$sql="SELECT CategoryID, Name FROM categories WHERE CategoryParentID <>0 and SubSubCat =0";
$result=mysql_query($sql) or die ("dead");
$subselect = array();
while($row=mysql_fetch_assoc($result))
{
$temp = array(
"value" => $row['CategoryID'],
"text" => $row['Name']
);
$subselect[] = $temp;
}

echo <<<END
<script language="javascript">
<!--
var Categories = new Array(2);
Categories= new Array();
END;
foreach ($mainselect as $cat)
{
echo "
var tmp = new Array();
tmp['text'] = {$cat['text]};
tmp['value'] = {$cat['value']};
Categories[Categories.length-1] = tmp;";
}
echo <<<END
var SubCategories= new Array();
END;

foreach ($subselect as $cat)
{
echo "
var tmp = new Array();
tmp['text'] = {$cat['text]};
tmp['value'] = {$cat['value']};
SubCategories[SubCategories.length-1] = tmp;";
}
echo <<<END
function populate(mainsel)
{
var target = document.forms[0].elements['model'];
target.options.length = 0;
var val = mainsel.options[mainsel.selectedIndex].value;
for (var i=0;i<SubCategories.length;i++)
{
var current = SubCategories;
if (current["value"] == val)
{
var opt = new Option(curent['text'],current['value']);
target.options[target.options.length-1] = opt;
}
}
}

// -->
</script>

<form name="test">
<select name="make" onChange="populate(this);">
END;
foreach ($mainselect as $option)
{
echo '<option value="' . $option['value'] . '">' . $option['text'] . '</option>
';
}
echo <<<END
</select>
<select name="model"></select>
</form>
END;

?>

dunno whats wrong, am confused

Thanks for the help chaps!

 

[chessbot]

You're (or I am) missing a single quote in the previous line:

tmp['text'] = {$cat['text[red]'[/red]]};

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakesperean sonnet.

 

[dongbamage]

Hi ok i changed that but now I'm getting:

Parse error: parse error, unexpected T_SL, expecting ',' or ';' in /files/home3/munchexpress/Includes/chainedlistboxes.php on line 54

line 54 is:
echo <<<END

line 55 is
function populate(mainsel)


What does that strange <<<END command do?

 

[chessbot]

echo <<<END
This uses the "here document" syntax to output
multiple lines with $variable interpolation. Note
that the here document terminator must appear on a
line with just a semicolon. no extra whitespace!
END;

http://us2.php.net/manual/en/function.echo.php

If you comment out the foreach loop before this, does it work (cause no PHP errors at least)?

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakesperean sonnet.

 

[dongbamage]

Nope! this still gives the same error:

<?
include ('/files/home3/munchexpress/Includes/db_connect.php');
$sql="SELECT CategoryID, Name FROM categories WHERE CategoryParentID = 0 AND Name <>'Top'";
$result=mysql_query($sql) or die ("dead");
$mainselect = array();
while($row=mysql_fetch_assoc($result))
{
$temp = array(
"value" => $row['CategoryID'],
"text" => $row['Name']
);
$mainselect[] = $temp;
}


$sql="SELECT CategoryID, Name FROM categories WHERE CategoryParentID <>0 and SubSubCat =0";
$result=mysql_query($sql) or die ("dead");
$subselect = array();
while($row=mysql_fetch_assoc($result))
{
$temp = array(
"value" => $row['CategoryID'],
"text" => $row['Name']
);
$subselect[] = $temp;
}

echo <<<END
<script language="javascript">
<!--
var Categories = new Array(2);
Categories= new Array();
END;
foreach ($mainselect as $cat)
{
echo "
var tmp = new Array();
tmp['text'] = {$cat['text']};
tmp['value'] = {$cat['value']};
Categories[Categories.length-1] = tmp;";
}
echo <<<END
var SubCategories= new Array();
END;

/*foreach ($subselect as $cat)
{
echo "
var tmp = new Array();
tmp['text'] = {$cat['text]};
tmp['value'] = {$cat['value']};
SubCategories[SubCategories.length-1] = tmp;";
} */
echo <<<END
function populate(mainsel)
{
var target = document.forms[0].elements['model'];
target.options.length = 0;
var val = mainsel.options[mainsel.selectedIndex].value;
for (var i=0;i<SubCategories.length;i++)
{
var current = SubCategories;
if (current["value"] == val)
{
var opt = new Option(curent['text'],current['value']);
target.options[target.options.length-1] = opt;
}
}
}

// -->
</script>

<form name="test">
<select name="make" onChange="populate(this);">
END;
foreach ($mainselect as $option)
{
echo '<option value="' . $option['value'] . '">' . $option['text'] . '</option>
';
}
echo <<<END
</select>
<select name="model"></select>
</form>
END;

?>

 

[chessbot]

Try to find where the error is by reducing the commented portion while there still is an error.

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakespearean sonnet.

 

[dongbamage]

ok i've whittled it down to this line:

Parse error: parse error, unexpected T_ENCAPSED_AND_WHITESPACE, expecting T_STRING or T_VARIABLE or T_NUM_STRING in /files/home3/munchexpress/hhh.php on line 79

echo '<option value="' . $option['value'] . '">' . $option['text'] . '</option>';

 

[chessbot]

Try echoing each piece at a time.

echo '<option value="';
echo $option['value'];
echo '">';
echo $option['text];
echo '</option>';

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakespearean sonnet.

 

[dongbamage]

ok have tried that too, gives me:

Parse error: parse error, unexpected T_ENCAPSED_AND_WHITESPACE, expecting T_STRING or T_VARIABLE or T_NUM_STRING in /files/home3/munchexpress/hhh.php on line 81

echo $option['value'];

I can't see anything wrong with it, still confused

Cheers Chessbot you are a very helpful chappie

 

[dongbamage]

echo $option;
echo '<option value="';
echo $option['value'];
echo '">';
echo $option['text'];
echo '</option>';

 

[chessbot]

Try putting

echo "<pre>";
print_r($option);
echo "</pre>";

inside the loop. Are all the variables in the correct places?

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakespearean sonnet.

 

[dongbamage]

ok I'm trying this but I get a parse error: unexpected $ on the last line:

<?
include ('db_connect.php');
$sql="SELECT CategoryID, Name FROM categories WHERE CategoryParentID = 0 AND Name <>'Top'";
$result=mysql_query($sql) or die ("dead");
$mainselect = array();
while($row=mysql_fetch_assoc($result))
{
  $temp = array( 
"value" => $row['CategoryID'],
"text" => $row['Name']);
  $mainselect[] = $temp;
}    


$sql="SELECT CategoryID, Name FROM categories WHERE CategoryParentID <>0 and SubSubCat =0";
$result=mysql_query($sql) or die ("dead");
$subselect = array();
while($row=mysql_fetch_assoc($result))
{
  $temp = array(
"value" => $row['CategoryID'],
"text" => $row['Name']
);
  $subselect[] = $temp;
}    

echo <<<END
<script language="javascript">
<!--
var Categories = new Array(2);
Categories= new Array();
END;
foreach ($mainselect as $cat)
{
  echo "
var tmp = new Array();
tmp['text'] = {$cat['text']};
tmp['value'] = {$cat['value']};
Categories[Categories.length-1] = tmp;";
}
echo <<<END
var SubCategories= new Array();
end;

foreach ($subselect as $cat)
{
  echo "
var tmp = new Array();
tmp['text'] = {$cat['text']};
tmp['value'] = {$cat['value']};
SubCategories[SubCategories.length-1] = tmp;";
} 
echo <<<END  
function populate(mainsel)
{
  var target = document.forms[0].elements['model'];
  target.options.length = 0;
  var val = mainsel.options[mainsel.selectedIndex].value;
  for (var i=0;i<SubCategories.length;i++)
  {
    var current = SubCategories[i];
    if (current["value"] == val)
    {
      var opt = new Option(curent['text'],current['value']);
      target.options[target.options.length-1] = opt;
    }
  }
}

// -->
</script>

<form name="test">
<select name="make" onChange="populate(this);">
<?
end;
foreach ($mainselect as $option)
{
echo "<pre>";
print_r($option);
echo "</pre>";

echo '<option value="';
echo $option['value'];
echo '">';
echo $option['text'];
echo '</option>';

}
echo <<<END ?>
</select>
<select name="model"></select>
</form>
<?
end;
?>

 

[chessbot]

<form name="test">
<select name="make" onChange="populate(this);">
<?
end;
foreach ($mainselect as $option)
{
echo "<pre>";
print_r($option);
echo "</pre>";

echo '<option value="';
echo $option['value'];
echo '">';
echo $option['text'];
echo '</option>';

}
echo <<<END ?>
</select>
<select name="model"></select>
</form>
<?
end;
?>

should be

<form name="test">
<select name="make" onChange="populate(this);">
END;
foreach ($mainselect as $option)
{
echo "<pre>";
print_r($option);
echo "</pre>";

echo '<option value="';
echo $option['value'];
echo '">';
echo $option['text'];
echo '</option>';

}
echo <<<END
</select>
<select name="model"></select>
</form>
END;
?>

Note the removed "<?" and "?>"s!

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakespearean sonnet.

 

[dongbamage]

ok this is the code i'm using:

<?
include ('/files/home3/munchexpress/Includes/db_connect.php');
$sql="SELECT CategoryID, Name FROM categories WHERE CategoryParentID = 0 AND Name <>'Top'";
$result=mysql_query($sql) or die ("dead");
$mainselect = array();
while($row=mysql_fetch_assoc($result))
{
  $temp = array( 
"value" => $row['CategoryID'],
"text" => $row['Name']);
  $mainselect[] = $temp;
}    


$sql="SELECT CategoryID, Name FROM categories WHERE CategoryParentID <>0 and SubSubCat =0";
$result=mysql_query($sql) or die ("dead");
$subselect = array();
while($row=mysql_fetch_assoc($result))
{
  $temp = array(
"value" => $row['CategoryID'],
"text" => $row['Name']);
  $subselect[] = $temp;
}    

echo <<<END
<script language="javascript">
<!--
var Categories = new Array(2);
Categories= new Array();
END;
foreach ($mainselect as $cat)
{
  echo "
var tmp = new Array();
tmp['text'] = {$cat['text']};
tmp['value'] = {$cat['value']};
Categories[Categories.length-1] = tmp;";
}
echo <<<END
var SubCategories= new Array();
END;

foreach ($subselect as $cat)
{
  echo "
var tmp = new Array();
tmp['text'] = {$cat['text']};
tmp['value'] = {$cat['value']};
SubCategories[SubCategories.length-1] = tmp;";
} 
echo <<<END
function populate(mainsel)
{
  var target = document.forms[0].elements['model'];
  target.options.length = 0;
  var val = mainsel.options[mainsel.selectedIndex].value;
  for (var i=0;i<SubCategories.length;i++)
  {
    var current = SubCategories[i];
    if (current["value"] == val)
    {
      var opt = new Option(curent['text'],current['value']);
      target.options[target.options.length-1] = opt;
    }
  }
}

// -->
</script>

<form name="test">
<select name="make" onChange="populate(this);">
END;
foreach ($mainselect as $option)
{
echo "<pre>";
print_r($option);
echo "</pre>";

echo '<option value="';
echo $option['value'];
echo '">';
echo $option['text'];
echo '</option>';

}
echo <<<END
</select>
<select name="model"></select>
</form>
END;
?>

Here is the view source stuff:

<script language="javascript">
<!--
var Categories = new Array(2);
Categories= new Array();
var tmp = new Array();
tmp['text'] = Books Videos + DVD's;
tmp['value'] = 4;
Categories[Categories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Cool Stuff;
tmp['value'] = 5;
Categories[Categories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Juggling + Circus Equipment;
tmp['value'] = 3;
Categories[Categories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Planet Poi;
tmp['value'] = 7;
Categories[Categories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Poi;
tmp['value'] = 1;
Categories[Categories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Toys and Games;
tmp['value'] = 2;
Categories[Categories.length-1] = tmp;var SubCategories= new Array();
var tmp = new Array();
tmp['text'] = Glow Poi;
tmp['value'] = 6;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = UV Poi;
tmp['value'] = 9;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Banner Poi;
tmp['value'] = 10;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Flag Poi;
tmp['value'] = 11;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Fabric Tailed Poi;
tmp['value'] = 12;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Ribbons;
tmp['value'] = 13;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Fire Poi;
tmp['value'] = 14;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Cones and Triangle Poi;
tmp['value'] = 15;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Astrojax;
tmp['value'] = 16;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Accessories;
tmp['value'] = 17;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Aerobie;
tmp['value'] = 18;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Kites;
tmp['value'] = 19;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Yo Yo's;
tmp['value'] = 1000000000;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Frisbee's;
tmp['value'] = 1000000001;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Other Outdoor Games;
tmp['value'] = 1000000002;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Juggling;
tmp['value'] = 1000000003;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Devil Sticks;
tmp['value'] = 1000000004;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Diablo;
tmp['value'] = 1000000005;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Staff;
tmp['value'] = 1000000006;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Other Equipment;
tmp['value'] = 1000000007;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Books;
tmp['value'] = 1000000008;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = DVD's;
tmp['value'] = 1000000009;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = CD's;
tmp['value'] = 1000000010;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Videos;
tmp['value'] = 1000000011;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Clothing;
tmp['value'] = 1000000012;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Make-up;
tmp['value'] = 1000000013;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Hair Dye;
tmp['value'] = 1000000014;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Bags;
tmp['value'] = 1000000015;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Other Cool Stuff;
tmp['value'] = 1000000016;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Poi;
tmp['value'] = 1000000017;
SubCategories[SubCategories.length-1] = tmp;
var tmp = new Array();
tmp['text'] = Merchandise;
tmp['value'] = 1000000018;
SubCategories[SubCategories.length-1] = tmp;function populate(mainsel)
{
  var target = document.forms[0].elements['model'];
  target.options.length = 0;
  var val = mainsel.options[mainsel.selectedIndex].value;
  for (var i=0;i<SubCategories.length;i++)
  {
    var current = SubCategories[i];
    if (current["value"] == val)
    {
      var opt = new Option(curent['text'],current['value']);
      target.options[target.options.length-1] = opt;
    }
  }
}

// -->
</script>

<form name="test">
<select name="make" onChange="populate(this);"><pre>Array
(
    [value] => 4
    [text] => Books Videos + DVD's
)
</pre><option value="4">Books Videos + DVD's</option><pre>Array
(
    [value] => 5
    [text] => Cool Stuff
)
</pre><option value="5">Cool Stuff</option><pre>Array
(
    [value] => 3
    [text] => Juggling + Circus Equipment
)
</pre><option value="3">Juggling + Circus Equipment</option><pre>Array
(
    [value] => 7
    [text] => Planet Poi
)
</pre><option value="7">Planet Poi</option><pre>Array
(
    [value] => 1
    [text] => Poi
)
</pre><option value="1">Poi</option><pre>Array
(
    [value] => 2
    [text] => Toys and Games
)
</pre><option value="2">Toys and Games</option></select>
<select name="model"></select>
</form>

here is the error:
Line 6 char 21 expected ';'

Its getting there though...