Question

I am using an Ajax call to a PHP file to get data from MySQL database and populate select options in HTML. The problem is that duplicate items in the options and I don’t know why. I tried the query in workbench and it brings back what I need.

PHP file:

<?php
    $q=$_GET["q"];

   // open db connection code

   $query = "select * from r2rtool.materialtype where type = 'FE' and tools like '%".$q."%'";
   $result = mysql_query($query);

   $option = "";

   while($row = mysql_fetch_array($result))
    {
        $mat = $row["Material"];
        $option.="<option value=\"$mat\">".$mat."</option>";

        echo $option;
    }

   // close db connection
?>

Ajax function:

function populatematerial(str)
{
    if (str=="") {
      document.getElementById("txtHint").innerHTML="";
      return;
    }

    if (window.XMLHttpRequest) {
      // IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
    }

    else{
      // IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function()
    {
      if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
      }
    }

    xmlhttp.open("GET","phpfile.php?q="+str,true);
    xmlhttp.send();
}

Answer 1

while($row = mysql_fetch_assoc($result))
{
     $option .= "<option value=\"{$row[Material]}\">{$row[Material]}</option>";
}
echo $option;