Return multiple Javascript calls

[dooley28]

Sorry about this question I'm new to Javascript.

I'm trying to call a Javascript function from a loop, which in turn calls some php with echos out some information. In this loop I have multiple drop down menus and for each drop down menu I want the php print-out to be displayed beneath.

However the php is only printed once. Below the first drop down menu, so if I chose "blah" in the last drop down menu it will show blah in below the 1st drop down-menu.
I assume it has something to do with the variable naming.

Here is my code.

This is the php calling the javascript

foreach($keywords as $keyw){
                echo "Here is a description of $keyw, please select a source";
                foreach($string['DefineResult']['Definitions'] as $definitions){
                        echo "<select name=\"dictionary\" onchange=\"showDef(this.value)\">";
                        foreach($definitions as $adef){
                                $source=$adef['WordDefinition'];
                                $description = $adef['Dictionary']['Name'];
                                echo "<option value=\"definition\">$dictionary</option>";
                                $noofkeywords++;
                        }
                        echo "</select>";
                        echo "<p><div id=\"txtHint\"><b>Definitions from this source.</b></div></p>";
                        }
                
                }

And here is the javascript script where the function is held..

var xmlHttp

function showDef(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="getdictionary.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged()
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}

function GetXmlHttpObject()
{
var xmlHttp=null;

try
 {
 // Firefox, Opera 8.0+, Safari
   xmlHttp=new XMLHttpRequest();
    }
    catch (e)
     {
 //     // Internet Explorer
       try
         {
           xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
             }
              catch (e)
                {
                  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                     }
                     return xmlHttp;
                }

If I had to guess its to do with the variable name txtHint, but im not sure how else to do it.
Again apologies if this is a very simple question.

Thanks for your help!

 

[dooley28]

Sorry just realised there is an unrelated error in this code


This

xmlHttp.onreadystatechange=stateChanged()

should be this.

xmlHttp.onreadystatechange=stateChanged

Any help would be very much appreciated!