HTML <select> not populating on runtime

I have following script to fetch id&names of certain retailers which I want to populate in a drop-down list. I have following HTML+PHP code for that. The drop-down is not populating with the results if I run through browser. However, if I use debugger in PHP Designer, the drop-down list is getting populated. I have <select> and </select> as HTML code and echoing <option>s in between. What could be going wrong?

<html>
<head>
<script type="text/javascript">
function fetch(custname,type)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {  
        document.getElementById(type).innerHTML = xmlhttp.responseText;
    }
  }
if (type=="Stores") custname = document.getElementById(custname).value;
xmlhttp.open("GET","http://localhost/PHP/HomeAccounting/fetch.php?custname="+custname+"&type="+type,true);
xmlhttp.send();    
}
</script>
 
</head>
<body>
<form>
List All purchases by a customer: 
<input type="text" id="custname1" />
<input type="button" id="btnpurchases" onclick="fetch(custname1.value,btnpurchases.value)" value="purchases">
</form>
<div id="purchases">
<!-- Purchases go over here -->
</div>
<hr>
<form>
List All purchases_items by a customer: 
<input type="text" id="custname2" />
<input type="button" id="btnpurchase_items" onclick="fetch(custname2.value,btnpurchase_items.value)" value="purchase_items">
</form>
<div id="purchase_items">
<!-- Purchases go over here -->
</div>
<hr>
<!--
<option value="More-AdityaBirla">More-AdityaBirla</option>
<option value="Big-Bazaar">Big-Bazaar</option>
<option value="Reliance-Fresh">Reliance-Fresh</option>
-->
<select id="retailers" name="retailers">
<?php
function getR()
{
    try 
    {
        $response = "";
        $con = mysql_connect("localhost", "username", "password");
        if (!$con) {
            die('Could not connect: ' . mysql_error());
        }
        mysql_select_db("homeaccounting", $con);
        $query = "select Retailers.id, Retailers.RetailerName from Retailers";
        $result = mysql_query($query);
 
        while ($row = mysql_fetch_array($result)) {
            $response = $response . "<option value=\\"" . $row['id'] . "\\">" . $row['RetailerName'] . "</option>";
        }
        mysql_close($con);
        return $response;
    }
    catch (exception $e) {
        echo "Message: " . $e->getMessage();
    }
}
$text = getR();
echo $text;
?>
</select>
<input type="button" id="btnStores" onclick="fetch(retailers.name,btnStores.value)" value="Stores">
</form>
<div id="Stores">
<!-- Stores go over here -->
</div>
</body>
</html>

regards,
Roopesh

Haven’t looked over the PHP yet, but I strongly recommend that you use an ajax framework for the XMLRequests because there is no real advantage in hand coding the darn things and a lot of reasons not to (cross browser debugging is a real headache).

jQuery and Prototype are the two most popular.

Thanks Morris.

The code worked as it is. My mistake was that I named the file as index.html rather than index.php. God I was splitting my hair on this :frowning: