Hi,

I have some javascript working which dynamically shows a drop down list on my form when a checkbox is ticked.

This all works fine for one set of checkboxes but when I try to do the same for another set of checkboxes it always displays the drop down lists in the same place on the page (not under the relevant checkbox picked).

the code in my customer.js file is:-

Code:
var xmlHttp

function showCust(str)
{ 
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 
var url="getcustomer.asp";
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)
{ 
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;
}

The code in my second customer2.js file is exactly the same apart from the function name changes from showCust to showCustomer. Also the txtHint changes to txtHint2


code on my page looks like this:-

Code:
<div id="txtHint"></div>
<div id="txtHint2"></div>
The 2 files are called from the top of the page:-

Code:
<script src="customer.js"></script>
<script src="customer2.js"></script>
It always displays content under txtHint2

(If I swap these around it does the opposite and shows content in txtHint and not txtHint2.)

Not sure why it's not displaying under both div's as they are named differently.

Any help to resolve this would be most appreciated.

thanks.