I want to pass value to multiple url in php using ajax and return the response in multiple html element id

Question

i want to send a value to multiple url's in php using ajax.. in the example below, i want to send the request to getuser.php and getuser2.php and want to return the response to element id TXTHINT and TXTHINT2 .. the below code does not work .. where am i going wrong.?

  function showUser(str) {
      if (str=="") {
        document.getElementById("txtHint").innerHTML="";
        return;
      }
      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("txtHint").innerHTML=xmlhttp.responseText;
        }
      }
      xmlhttp.open("GET","getuser.php?city_main="+str,true);
      xmlhttp.send();



    function showUser2(str) {
      if (str=="") {
        document.getElementById("txtHint2").innerHTML="";
        return;
      }
      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("txtHint2").innerHTML=xmlhttp.responseText;
        }
      }
      xmlhttp.open("GET","getuser2.php?city_main="+str,true);
      xmlhttp.send();
    }  


    }

Answer 1

Use this instead of you code (yours is really ugly and the nesting is weird):

function fillHint(hintID, url, str) {
  if (str=="") {
    document.getElementById(hintID).innerHTML="";
    return;
  }
  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(hintID).innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET",url+".php?city_main="+str,true);
  xmlhttp.send();
}

function showUser(str) {
  fillHint("txtHint", "getuser", str);
}

function showUser2(str) {
  fillHint("txtHint2", "getuser2", str);
}

function someMasterCallFn() {
  if (...) { // if first should be called
    showUser(theString);
  } else if (...) { // if second should be called
    showUser2(theString);
  }
}

And if you want to call both functions you have two possibilities:

function showUser(str) {
  fillHint("txtHint", "getuser", str);
  showUser2(str);
}

function showUser2(str) {
  fillHint("txtHint2", "getuser2", str);
}

or

function someMasterCallFn() {
  showUser(theString);
  showUser2(theString);
}