[SOLVED] multiple dropdowns via ajax / php

soloWebDev · #1 (**permalink**) 05-09-08, 03:37 PM

I am hoping one of the javascript pros here can offer assistance.
home.php

HTML Code:

<script type="text/javascript" language="javascript" src="includes/ajaxFunctionItem.js"></script>
<form name="addItems_form" method="post" action="" onSubmit="update_totals();">
<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#f7f8f8" align="left" >
<tr> 
<td>Category:</td>
<td colspan="2"> <select name="category" onChange="getCapacity(this.value)"><?=category($category)?></select> </td>
</tr>
<tr> 
<td>Capacity:</td>
<td colspan="2"><div id="capacitydiv"><select name="capacity" ><option>Select category First</option></select></div></td>
</tr>
<tr> 
<td>Items:<input name="discprice" type="hidden" value=<?=$discrate?>></td>
<td colspan="2"><div id="itemsdiv"><select name="items"><option>Please select a Category</option></select></div></td>
</tr>
</table>
</form>

ajaxFunctionItem.js

javascript Code:

function getXMLHTTP() { //fuction to return the xml http object
        var xmlhttp=false;  
        try{
            xmlhttp=new XMLHttpRequest();
        }
        catch(e)    {      
            try{            
                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e){
                try{
                req = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(e1){
                    xmlhttp=false;
                }
            }
        }
            
        return xmlhttp;
    }
    
    function getCapacity(categoryId) {    
        
        var strURL="includes/findcapacity.php?category="+categoryId;
        var req = getXMLHTTP();
        
        if (req) {
            
            req.onreadycapacitychange = function() {
                if (req.readycapacity == 4) {
                    // only if "OK"
                    if (req.status == 200) {                        
                        document.getElementById('capacitydiv').innerHTML=req.responseText;            
                    } else {
                        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    }
                }            
            }         
            req.open("GET", strURL, true);
            req.send(null);
        }      
    }
    function getItems(categoryId,capacityId) {    
        var strURL="includes/finditems.php?category="+categoryId+"&capacity="+capacityId;
        var req = getXMLHTTP();
        
        if (req) {
            
            req.onreadycapacitychange = function() {
                if (req.readycapacity == 4) {
                    // only if "OK"
                    if (req.status == 200) {                        
                        document.getElementById('itemsdiv').innerHTML=req.responseText;      
                    } else {
                        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    }
                }            
            }         
            req.open("GET", strURL, true);
            req.send(null);
        }
                
    }

findcapacity.php

PHP Code:


			
<?
    $category=intval($_GET['category']);
    //Making the connection to the DB
    include('../../../_admin/db_connection/connectToDB.php');
    //Connection To DB Through This Function
    connectToDB();
?>

<select name="capacity" onchange="getItems(<?=$category?>,this.value)"><?=capacity($capacity)?></select>

finditems.php

PHP Code:


			
<?
    $categoryId=intval($_GET['category']);
    $capacityId=intval($_GET['capacity']);
    //Making the connection to the DB
    include('../../../_admin/db_connection/connectToDB.php');
    //Connection To DB Through This Function
    connectToDB();
    
?>
<select name="items" size="11"><?=inventory($category,$capacity,$items,$qtetype)?></select>

Thank in advance for your help.
Problem: I cant get the second drop down to populate.

job0107 · #2 (**permalink**) 05-10-08, 07:13 AM

I couldn't get your ajaxFunctionItem.js to work unless I changed it like this:

Javascript Code:

function getXMLHTTP() { //fuction to return the xml http object
        var xmlhttp=false;
        try{
            xmlhttp=new XMLHttpRequest();
        }
        catch(e)    {
            try{
                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e){
                try{
                req = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(e1){
                    xmlhttp=false;
                }
            }
        }
 
        return xmlhttp;
    }
 
    function getCapacity(categoryId) {
 
        var strURL="includes/findcapacity.php?category="+categoryId;
        var req = getXMLHTTP();
 
        if (req) {
 
            req.onreadystatechange = function() {
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {
                        document.getElementById('capacitydiv').innerHTML=req.responseText;
                    } else {
                        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    }
                }
            }
            req.open("GET", strURL, true);
            req.send(null);
        }
    }
    function getItems(categoryId,capacityId) {
        var strURL="includes/finditems.php?category="+categoryId+"&capacity="+capacityId;
        var req = getXMLHTTP();
 
        if (req) {
 
            req.onreadystatechange = function() {
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {
                        document.getElementById('itemsdiv').innerHTML=req.responseText;
                    } else {
                        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    }
                }
            }
            req.open("GET", strURL, true);
            req.send(null);
        }
 
    }