why will this not auto populate my list?

[jbrill]

Im trying to auto populate a list once i select from the first drop down.. why isnt it working?

 

<td align="center" valign="top">
    
   			<select name="cat" onChange="populateSubcat(document.categories,document.categories.cat.options[document.categories.cat.selectedIndex].value)">
<option selected value=''>Select Category</option>
<?

$catsql = "SELECT DISTINCT cat, category FROM category";
$cats = mysql_query($catsql);
$category = mysql_fetch_array($cats);



do

{
if($category['cat']==$prod['cat'])

{
echo "<option selected value='".$category['cat']."'>".$category['category']."</option>";

}
else
{
echo "<option value='".$category['cat']."'>".$category['category']."</option>";

}

} while ($category = mysql_fetch_array($cats));



?>

    
    </td>
    
    
    <td align="center" valign="top">	
		<select name="Subcat">

<?

$loadsubcat = "SELECT * FROM subcategory WHERE cat='".$curcat."'";
$sclist = mysql_query($loadsubcat);
$subcats = mysql_fetch_array($sclist);

do
{
echo "<option value=\"".$subcats['subc']."\"";
if ($cursubcat == $subcats['subc'])
{echo "selected";}

echo ">".$subcats['subcat']."</option>";
}
while($subcats = mysql_fetch_array($sclist));
?>
   
   </td>
    

[Barand]

User has to make a selection from first list and submit the form to server. Then you can get the value for $curcat to populate the second.

 

$curcat has no apparent value in the code you posted

[jbrill]

any way you could show me?

[Daniel0]

Try this:

 

page1.php:

<script type="text/javascript">
function populate_subcat(category_id, subcat_obj_id)
{
var obj = document.getElementById(subcat_obj_id);
var http_request;

if(window.XMLHttpRequest)
{
	http_request = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
	try {
		http_request = new ActiveXObject('Msxml2.XMLHTTP');
	}
	catch(e)
	{
		try {
			http_request = new ActiveXObject('Microft.XMLHTTP');
		}
		catch(e) {}
	}
}

if(!http_request)
{
	alert('Error: Could not create an XMLHttpRequest instance.');
	return false;
}

http_request.onreadystatechange = function() {
	if(http_request.readyState == 4)
	{
		if(http_request.status == 200)
		{
			obj.innerHTML = obj.innerHTML+http_request.responseText;
			obj.style.display='';
		}
		else {
			alert('Error: Failed getting subcategories from the database.');
		}
	}
};
http_request.open('GET', 'page2.php?cat_id='+category_id, true);
http_request.send();
}

function makeRequest(url) {
        var httpRequest;

        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            httpRequest = new XMLHttpRequest();
            if (httpRequest.overrideMimeType) {
                httpRequest.overrideMimeType('text/xml');
                // See note below about this line
            }
        } 
        else if (window.ActiveXObject) { // IE
            try {
                httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
                } 
                catch (e) {
                           try {
                                httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                               } 
                             catch (e) {}
                          }
                                       }

        if (!httpRequest) {
            alert('Giving up  Cannot create an XMLHTTP instance');
            return false;
        }
        httpRequest.onreadystatechange = function() { alertContents(httpRequest); };
        httpRequest.open('GET', url, true);
        httpRequest.send('');
}
</script>

<table>
<tr>
	<td align="center" valign="top">
	<select name="cat" onChange="populate_subcat(this.value, 'subcat')">
		<option selected value=''>Select Category</option>
<?php
$db_link = mysql_connect("localhost","root","");
mysql_select_db("database_name", $db_link);

$query_result = mysql_query("SELECT DISTINCT cat, category FROM category");

while($cat = mysql_fetch_assoc($query_result))
{
echo "\t\t\t\t<option value='{$row['cat']}'>{$row['category']}</option>\n";
}
?>
    </select>
    </td>
	<td align="center" valign="top">	
		<select name='subcat' id='subcat' style='display:none;'>
			<option selected value=''>Select Subategory</option>
		</select>
	</td>
</tr>
</table>

 

page2.php:

<?php
$db_link = mysql_connect("localhost","root","");
mysql_select_db("database_name", $db_link);

$query_result = mysql_query("SELECT * FROM subcategory WHERE cat='".mysql_real_escape_string($_GET['cat_id'])."'");

while($cat = mysql_fetch_assoc($query_result))
{
echo "\t\t\t\t<option value='{$row['subc']}'>{$row['subcat']}</option>\n";
}
?>

 

If you had prototype, then you could replace the Javascript with:

function populate_subcat(category_id, subcat_obj_id)
{
var obj = $(subcat_obj_id);

new Ajax.Request('page2.php?cat_id='+category_id, {
	method: 'get',
	onSuccess: function(request) {
		obj.style.display='';
		obj.innerHTML = obj.innerHTML+request.responseText;
	}
});
}

 

Note: Code is not tested.

[jbrill]

The above code didnt work, thanks though!

 

Anyone else?

[jbrill]

here is an example of the page currently.. the box where it says step 1, needs to be repeated when "Add another step is click"