Welcome to WebmasterWorld Guest from 54.145.136.73

Forum Moderators: brotherhood of lan & mack

Trying to populate drop down from another drop down

   
8:36 pm on Jan 30, 2009 (gmt 0)

5+ Year Member



I apologize in advance for all the code I'm going to dump into this, but I know absolutely NOTHING about Ajax and Javascript. I'm trying to populate a Sub-Category drop down based on the choice made in a Category drop down. I'm populating the Category drop down from a static array (although if I can get this working I may try to pull it dynamically). Here's the php code:

<td align="right" class="maintextCopy"><div align="left"><em><strong>Category:</strong></em></div></td>
<td colspan="2" align="left"><select name="interestCode" class="selectbox" id="interestCode" onchange="getInterestDescList(this)";>
<?php foreach ($arrInterestCode as $key => $value) { ?>
<option value="<?=stripslashes($value)?>" <?=$objU->interestCode == stripslashes($value) ? "selected" : ""?>>
<?=stripslashes($value)?>
</option>
<?php } ?>
</select>
<!--<input type="hidden" name="vCountry" value="<?=stripslashes($objU->vCountry)?>">--></td>
</tr>
<tr align="left">
<td colspan="3"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="underline"><strong><img src="images/spacer.gif" width="1" height="1"></strong></td>
</tr>
</table></td>
</tr>
<tr>
<td align="right" class="maintextCopy"><div align="left"><em><strong>Sub-category:</strong></em></div></td>
<td colspan="2" align="left"><select name="interestDesc" class="selectbox" id="interestDesc" onChange="changeCSS(this, 'select');">
<?php foreach ($arrinterestDesc as $key => $value) { ?>
<option value="<?=stripslashes($value)?>" <?=$objU->interestDesc == stripslashes($value) ? "selected" : ""?>>
<?=stripslashes($value)?>
</option>
<?php } ?>
</select>
<!--<input type="hidden" name="vCity" value="--">--></td>
</tr>

<tr align="left">
<td colspan="3"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="underline"><strong><img src="images/spacer.gif" width="1" height="1"></strong></td>
</tr>
</table></td>

And here is the Ajax called by it:

function getInterestDescList(sel)
{
var interestCode = sel.options[sel.selectedIndex].value;
document.getElementById('interestDesc').options.length = 0;// Empty city select box
if(interestCode.length>0){
var index = ajax.length;
ajax[index] = new sack();

ajax[index].requestFile = 'get_interestdesc_list.php?id='+interestCode;// Specifying which file to get
ajax[index].onCompletion = function(){ createInterestDescList(index) };// Specify function that will be executed after file has been found
ajax[index].runAJAX();// Execute AJAX function
}
}

function createInterestDescList(index)
{
var obj = document.getElementById('interestDesc');
eval(ajax[index].response);// Executing the response from Ajax as Javascript code
}

I can post the get_interestdesc_list.php and the function called by that if it is needed, but figured I'd start with this. Thank you for any help.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month