Welcome to WebmasterWorld Guest from 54.145.144.101

Forum Moderators: brotherhood of lan & mack

Message Too Old, No Replies

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.