Populating a combo box from another combo box

shure2

Hi,

I am using javascript to populate a number of text boxes based on the data item selected in the 1st combo box.

I am now working on making the selection of that combo box populate another combo box with items from another table. I can hard the sql code for the 2nd combo box so that when I select an option it populates more text boxes, but want the contents of the 2nd combo box to dynamically change depending on the selection of the 1st box. I would like this to do it without refreshing the page after each 1st combo box selection.

any help would be massively appreciated as I been stuck on this for a while. The 2nd box does not populate with the below code as I guess the variable isn't populated, I can put '1' in and it selects products with that prodid, but as explained above i'd like it to read the prodid from the 1st combo box.

<?php
require "session_logincheck.php";

function selectProductAndPopulate()
{
    require "product_details.php";
    require "connect.php";
?>
<html>
<script type="text/javascript">
	var prodDetailsArray = new Array();
        var prodSpecificDetailsArray = new Array();



<?php
	$selectProductQuery = "SELECT * FROM product ORDER BY prodname";
	$selectProductResult = mysql_query($selectProductQuery) or die(mysql_error());


	// build javascript array
	while ($prodrow1=mysql_fetch_array($selectProductResult))

                {

                    echo 'prodDetailsArray['.$prodrow1['prodid'].'] = new Array();';
		echo 'prodDetailsArray['.$prodrow1['prodid'].']["prodcompid"] = "'.$prodrow1['prodcompid'].'";';
                    echo 'prodDetailsArray['.$prodrow1['prodid'].']["prodcode"] = "'.$prodrow1['prodcode'].'";';
                    echo 'prodDetailsArray['.$prodrow1['prodid'].']["prodname"] = "'.$prodrow1['prodname'].'";';
                    echo 'prodDetailsArray['.$prodrow1['prodid'].']["prodcategory"] = "'.$prodrow1['prodcategory'].'";';
                    echo 'prodDetailsArray['.$prodrow1['prodid'].']["produnitprice"] = "'.$prodrow1['produnitprice'].'";';
                    echo 'prodDetailsArray['.$prodrow1['prodid'].']["prodphoto"] = "'.$prodrow1['prodphoto'].'";';
                    echo 'prodDetailsArray['.$prodrow1['prodid'].']["proddescription"] = "'.$prodrow1['proddescription'].'";';

	}

            $selectProductDetailsQuery = "SELECT * FROM productdetail ORDER BY proddetfield";
	$selectProductDetailsResult = mysql_query($selectProductDetailsQuery) or die(mysql_error());


	// build javascript array
	while ($proddetrow1=mysql_fetch_array($selectProductDetailsResult))

                {

                    echo 'prodSpecificDetailsArray['.$proddetrow1['proddetid'].'] = new Array();';
		echo 'prodSpecificDetailsArray['.$proddetrow1['proddetid'].']["proddetvalue"] = "'.$proddetrow1['proddetvalue'].'";';


	}


?>

function showProductName() {
	var prodid = document.prodform.prodid.value;
	document.prodform.prodcompid.value = prodDetailsArray[prodid]["prodcompid"];
            document.prodform.prodcode.value = prodDetailsArray[prodid]["prodcode"];
	document.prodform.prodname.value = prodDetailsArray[prodid]["prodname"];
            document.prodform.prodcategory.value = prodDetailsArray[prodid]["prodcategory"];
            document.prodform.produnitprice.value = prodDetailsArray[prodid]["produnitprice"];
            document.prodform.prodphoto.value = prodDetailsArray[prodid]["prodphoto"];
            document.prodform.proddescription.value = prodDetailsArray[prodid]["proddescription"];



}

    function showProductSpecName() {
	var proddetid = document.prodform.proddetid.value;
	document.prodform.editproddetvalue.value = prodSpecificDetailsArray[proddetid]["proddetvalue"];
    }


window.onload=function() {
	showProductName();
            //showProductSpecName();

}

</script>


<form name="prodform">
    <div id="topl">
        <div class ="toplpost">
            <h1 class="title"> Select a product </h1>
            <div class="entry">
                <select name="prodid" onchange="showProductName()">
                <?php
                $selectProductQuery = "SELECT * FROM product where userid = '".$_SESSION['userid']."' ORDER BY prodname";
                $selectProductResult = mysql_query($selectProductQuery) or die(mysql_error());

            while($prodrow1=mysql_fetch_array($selectProductResult))
            {
                echo '<option value="'.$prodrow1['prodid'].'">'.$prodrow1['prodname'].'</option>';
                $productID = $prodrow1['prodid'];
            } ?>
	</select>
        </div>
    </div>
</div>

<div id="topm">
    <div class ="topmpost">
        <h1 class="title"> Select a product detail </h1>
        <div class="entry">
            <select name="proddetid" onchange="showProductSpecName()">
            <?php
            $selectProductDetailsQuery = "SELECT * FROM productdetail where prodid = '".$productID."' ORDER BY proddetfield";
            $selectProductDetailsResult = mysql_query($selectProductDetailsQuery) or die(mysql_error());

            while($proddetrow1=mysql_fetch_array($selectProductDetailsResult))
            {
                echo '<option value="'.$proddetrow1['proddetid'].'">'.$proddetrow1['proddetfield'].'</option>';
            } ?>
            </select>
        </div>
    </div>
</div>
            <?php productDetails(); ?>
</form>
</html>
<?php

}?>

djjjozsi

Here you can see a simple AJAX call for doing this.

All you have to change is to replace the response data.

shure2

djjjozsi;10948076 wrote:
Here you can see a simple AJAX call for doing this.

All you have to change is to replace the response data.

hi, thanks this is a good example, the issue I still have is that I need to populate the contents of another combo box with what I select from the 1st combo box - all coming from the database (1 table for each combo box :S)

I'm getting a bit desperate now, please any more help would be very much appreciated

djjjozsi

Lets make a sample image what do you want to achieve 🙂

I thought you need to make a listbox, populated from a MYSQL table,
and if you select one element you insert the record into textfields.

shure2

djjjozsi;10948411 wrote:
Lets make a sample image what do you want to achieve 🙂

I thought you need to make a listbox, populated from a MYSQL table,
and if you select one element you insert the record into textfields.

Hi,

I have done this with the code above, but I now need a listbox to be populated as well as the other text fields (based on my selection from the first list box), but the list box needs to be populated with more than one option.

Basically I have a product table and a productdetail table (1 to many relationship), when I select a product from the listbox I have made it populate text fields with that products data from the product table, but I also need a listbox to be populated with all the productdetailnames from the productdetail table. Then when I select a productdetailname (such as height) it will populate a textfield with its value (such as 10cm) from the productdetail table.

The prodid is a foreign key in the productdetail table so I should be able to find out what productdetailnames are appropriate for the product.

Example of data:
PRODUCT(prodiid = 1, prodname = box)
PRODUCTDETAIL(proddetid = 1, prodid = 1, proddetailname = height, proddetailvalue = 10cm)
(proddetid = 2, prodid = 1, proddetailname = width, proddetailvalue = 20cm)

hope this helps your understanding so you can help me.

djjjozsi

Hello!

i'm gonna make a tutorial how to manage this issue.

it takes time to uploaded to youtube 🙂 but it takes 20 minutes 🙂

whoops... sorry... its not 2010 🙁 Anyway, it is an interesting task.

djjjozsi

If somebody wanted to know a way to make listboxes:
http://www.youtube.com/watch?v=HvxlCw2_bxQ