Two <div> ID Problem with AJAX

[cmccarroll]

I have to two select boxes with values and two javascripts which call server-side scripts. The first select box will write to the first <div id='txtHint1'></div>, but when I intoduce a second <div id='txtHint2'></div>, the first select box writes to there instead of <div id='txtHint1'></div>.

First Select Box

onchange='javascript:showCertificates(this.value)

Second Select Box

onchange='javascript:showEndorsements(this.value)

First JS

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

Second JS

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

[acoder]

The problem is you've used the same function name. Use a different function name, even something as simple as stateChanged2().

PS. please remember to use code tags when posting code. Thanks!