dropdown select onchange to update multiple divs

I have a selectbox with an onchange event to update the content of a with content from another file. It works fine. but what I want to do is to update the content in two different divs at the same time when I select something from my selectbox.

So I added another function similar to the first one and added it to the onchange in the tag.

The problem is that it still only updates one of the two . What am I doing wrong ? Or is there an easier way to update two on the same time with info from another page?

script on mainpage:

<script>
function showFirstDiv(str) {
  if (str=="") {
    document.getElementById("div1").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("div1").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","infopage.php?info_div1="+str,true);
  xmlhttp.send();
}

function showSecondDiv(str) {
  if (str=="") {
    document.getElementById("div2").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("div2").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","infopage.php?info_div2="+str,true);
  xmlhttp.send();
}

html on mainpage

<div id="users">
  <form>
    <select name="users" onchange="showFirstDiv(this.value); showSecondDiv(this.value);">
      <option value="">Select a person:</option>
      <option value="1">Peter Griffin</option>
      <option value="2">Lois Griffin</option>
      <option value="3">Joseph Swanson</option>
      <option value="4">Glenn Quagmire</option>
    </select>
  </form>
</div>

<!-- div1 -->
<div id="div1">
  <p>info to be listed in div 1 here</p>
</div>

<!-- div2 -->
<div id="div2">
  <p>info to be listed in div 2 here</p>
</div>

infopage.php

<?php

if ($_GET[info_div1] == '1')
    {
        echo 'info 1 to be showed in div 1';
    }
if ($_GET[info_div1] == '2')
    {
        echo 'info 2 to be showed in div 1';
    }
if ($_GET[info_div1] == '3')
    {
        echo 'info 3 to be showed in div 1';
    }
if ($_GET[info_div1] == '4')
    {
        echo 'info 4 to be showed in div 1';
    }

if ($_GET[info_div2] == '1')
    {
        echo 'info 1 to be showed in div 2';
    }
if ($_GET[info_div2] == '2')
    {
        echo 'info 2 to be showed in div 2';
    }
if ($_GET[info_div2] == '3')
    {
        echo 'info 3 to be showed in div 2';
    }
if ($_GET[info_div2] == '4')
    {
        echo 'info 4 to be showed in div 2';
    }

?>

Both functions are using the same global variable xmlhttp. So when you call the second function, it overwrites this variable with its XMLHttpRequest object. You should use a local variable, by declaring it with var.

In general, you should always declare variables to be local unless you actually need them to be global variables.

function showFirstDiv(str) {
  var xmlhttp;
  if (str=="") {
    document.getElementById("div1").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("div1").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","infopage.php?info_div1="+str,true);
  xmlhttp.send();
}

function showSecondDiv(str) {
  var xmlhttp;
  if (str=="") {
    document.getElementById("div2").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("div2").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","infopage.php?info_div2="+str,true);
  xmlhttp.send();
}