Being a newbie I've found all the threads on this forum about this topic extremely useful. So, i've cobbled together the attached javascript/html/php/mysql code that uses a first selection box to populate a second selection box that, in turn, populates a text box. i.e. the user selects either bead or utensil that populates the second selection box with the relevant items (either beads or utensils). I link to a database. When the user selects an item in the second drop-down box, a price appears in the text field.
My problem is that I can only seem to get the prices for the first selection, i.e. beads. When I select utensils from the drop-down box I get the same set of prices (i.e. the bead prices) instead of the utensil prices. I would be very grateful for some help on this! Here is my code:
Code:
<hmtl>
<?php
require_once("/..../...php");
?>
<form name="form1">
<select name="types" onChange="fillItems(0);">
<option value="1">Beads</option>
<option value="2">Utensils</option>
</select>
<select name="items" onChange="fillPrices(0);"></select>
<input type="text" name="prices" value= " " />
</form>
<script type="text/javascript">
var arItems = new Array()
arItems = [
<?php
$query = "SELECT item_type, stock_id, model_name, price FROM stock";
$result = mysqli_query($dbc, $query);
$num_rows = mysqli_num_rows( $result );
$i = 1;
while ($row_result = mysqli_fetch_row($result)) {
echo "['".$row_result[0]."', '".$row_result[1]."', '".$row_result[2]."', '".$row_result[3]."']";
if ( $i < $num_rows )
echo ",
";
$i++;
}
?>
]
function fillItems(int_Start) {
var fTypes = document.form1.types;
var fItems = document.form1.items;
var a = arItems;
var b, c, d, intItem, intType, intPrice;
if ( int_Start >= 0 ) {
for ( b = 0; b < a.length; b++ ) {
if ( a[b][1] == int_Start )
intType = a[b][0];
}
for ( c = 0; c < fTypes.length; c++ ) {
if ( fTypes.options[ c ].value == intType )
fTypes.selectedIndex = c;
}
}
if ( intType == null )
intType = fTypes.options[ fTypes.selectedIndex ].value;
fItems.options.length = 0;
for ( d = 0; d < a.length; d++ ) {
if ( a[d][0] == intType )
fItems.options[ fItems.options.length ] = new Option( a[d][2], a[d][1] );
if ( a[d][1] == int_Start )
fItems.selectedIndex = fItems.options.length - 1;
}
}
function fillPrices() {
var fItems = document.form1.items;
var fPrices = document.form1.prices;
fPrices.length = fItems.options.length;
var a = arItems;
var x = fItems.selectedIndex;
fPrices = a[x][3];
document.form1.prices.value = fPrices;
}
</script>
</html>
Thanks Wirehopper! Here is the 'View Source" version. The names don't make sense I know, just a jumble of test characters at this stage for the "model_name". So basically you have from left to right in each row: item_type, stock_id, model_name, price. I'm using firebug to debug. It's a great tool. It's not showing any errors that I can see though. I see some faulty logic on my part now though. I'm using one array arItems to group the beads and the utensils together. I guess that needs to be split into two arrays to be able to access the relevant price data in each group, right...?
Linear Mode
