Populating a combo box from another combo box

shure2 · March 31, 2010

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

}?>

ChemicalBliss · March 31, 2010

Right you have two options .

1. Output all the HTML that could possibly be needed (ie, echo all ther different combo boxes with their values, and then all but the one requested using javascript.) - This make the page html Heavy, not a good thing.

2. Use AJAX

Using AJAX is a very neat and easy way of creating a sort of faux real-time environment almost solely in php.

-CB-

shure2 · April 1, 2010

Right you have two options .

1. Output all the HTML that could possibly be needed (ie, echo all ther different combo boxes with their values, and then all but the one requested using javascript.) - This make the page html Heavy, not a good thing.

2. Use AJAX

Using AJAX is a very neat and easy way of creating a sort of faux real-time environment almost solely in php.

-CB-

thanks for your advice, do you have any advice where I can start to do this in ajax or any similar examples?

ChemicalBliss · April 1, 2010

There are plenty of tutorials on the internet that will save me repeating myself .

Just search "Simple AJAX Tutorial".

AJAX is basically javascript, you use a javascript function to retrieve a page (any page, you can pass information to the page also), the page can return any content, like a simple True or False, to a full html document or even an image etc etc.

Then you use Javascript to use that return value to show or hide certain fields, perform complex conditional tasks etc. The only thing is most of AJAX is in Javascript, the only PHP is the server side calculation page (The page that AJAX communicates with), so anything that you want to "update" in real time will have to be done using Javascript.

AJAX also adds overheads to a website, as your making additional calls to the server via the AJAX function, and there are some little querks to working with AJAX that you will have to find out.

AJAX is a super-powerful "conduit" between Real-Time Javascript and PHP Servlets.

Good Luck.

(http://www.lmgtfy.com/?q=PHP+AJAX+TUTORIAL)

Sign In

Populating a combo box from another combo box

Recommended Posts

shure2

Link to comment

Share on other sites

ChemicalBliss

Link to comment

Share on other sites

shure2

Link to comment

Share on other sites

ChemicalBliss

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information