handling multiple XMLHttpRequest calls f

Question

Note: I have two xmlHttp.open requests with two diffent url strings and two onreadystatechange functions defined. I have an html form that has 4 text boxes and a submit button. After the user enters data into text boxes 1(id) & 2(type), my onchange function for these boxes issues an xmlHttp.open("GET", url, true); with a url of something like "getQuestion.php?id=12345&type=ABC". Then my statechange function, takes the xml response that is returned and puts the response into the 3rd text box. All of this works great! I enter text and text pops up into a box asking me a question.

Now what I tried to do was once the 4th text box was filled in and the submit button clicked, I wanted the submit function to use xmlHttp.open again. This time, there is a new url, with one more parameter on the url line of &answer="XXXX" where XXXX was what was typed into the 4th box. This second url call is made because the new statechange function is called. But the response is always null, I see "answer was .". I'm thinking this must be something to do with having multiple url's that I am not setting up properly but I can't find anything from my web searches on "multiple xmlHttpRequest". I've attached my HTML and the javacode block that initiates the failing server request and it's statechange function. What am I doing wrong? One more thing, if I directly call my 2nd url (php script) with parameters, I get the response I expect.

<script language="Javascript">
/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
var attempts = 0;
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}

function CheckAnswer() {
  var myId = document.getElementById("FilerID").value;
  var myType = document.getElementById("FilerType").value;
  var myQuestion = document.getElementById("QuestionID").value;
  var myAnswer = document.getElementById("AnswerID").value;

  if (myId == "" || myType == "" || myQuestion == "" || myAnswer == "")
  {
      alert("You must fill in all boxes before submitting this request.");
      return;
  }

  // Build the URL to connect to
  var url = "getAnswer.php?id=" + encodeURI(myId) + "&type=" + encodeURI(myType) + "&answer=" + encodeURI(myAnswer);

  // Open a connection to the server
  xmlHttp.open("GET", url, true);
  xmlHttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  // Setup a function for the server to run when it's done
  xmlHttp.onreadystatechange = AnswerState;

  // Send the request
  xmlHttp.send(null);
}

function AnswerState() {
  if (xmlHttp.readyState == 4) {
    var response2 = xmlHttp.responseText;
        alert("answer was " + response2+".");
        switch (response2)
    {
        case "pdwLIMBO":
            alert("There was an error while trying to reset your password.");
            break;
        case  "pdwFALSE":
            alert("Answer was incorrect.");
            attempts = attempts +1;
            if (attempts == 3)
            {
                /*is there a way to kill it right now?*/
            }
            else
                document.getElementById("AnswerID").focus();
            break;
        case "pdwTRUE":
            alert("answer was " + response);
            alert("Your new password will be emailed to you.  Please check your email.");
            break;
        default:
            alert("nothing!");
            break;
    }

  }
}
<table width="98%" border="0" align="center" height="280" background="/images/DSCF0308_B.gif">
<tr>
<td align="center">
<h2 align="center" class="style26">Reset Service</h2>
<!--<form name="resetMe" action="SecretQuestion3.php" method="post" onsubmit="return CheckInput();">-->
<form  >
  <TABLE cellspacing=0 cellpadding=5 border=0 width="90%"> <!---this color is light blue in sign in box--->
      <tr id="FilerIDRow">
      <TD align="right" class="RptStd"><b>Filer ID:</b></TD>
      <TD align="left" class="RptStd"> <input type="text" id="FilerID" name="FilerID" nowrap size=8/ onChange="callForQuestion();"></td>
    </tr>
    <tr >
    <TD align="right" class="RptStd" ><b>Filer Type: </b></TD>
    <TD align="left" class="RptStd">
       <select name="FilerType" id="FilerType" onChange="callForQuestion();">
        <option value="COH">COH: Candidate/Officeholder (Non-Judicial)</option>
        <option value="JCOH">JCOH: Judicial Candidate/Officeholder </option>
       </select></TD>
    </tr>
    <tr id="QuestionRow">
    <TD align="right" class="RptStd"><b>Secret Question:</b></TD>
    <TD align="left" class="RptStd"> <input type="text" id="QuestionID" name="QuestionID" nowrap size="50"></td>
    </tr>
    <tr id="AnswerRow">
    <TD align="right" class="RptStd"><b>Your Answer:</b></TD>
    <TD align="left" class="RptStd"> <input type="text" id="AnswerID" name="AnswerID" nowrap size="50" onChange="checkAnswer();"></td>
    </tr>
    <TR>
    <TD align="center" colSpan=2><br><INPUT type="button" value="  Reset  " name="btn_submit" class="RptBtn" onClick="CheckAnswer()">&nbsp;&nbsp;
    <INPUT type="button" value=" Clear " name="btn_clear" class="RptBtn" onClick="ClearForm()"></TD>
    </TR>
</table>
</form> 
</td>
</tr>
</table>

Answer 1

+1 to what Jacob Tobias suggested above in referencing Rob W's solution to this. I have reiterated Rob W's recommendation that Jacob is linking / referring too:

Define xmlHttp using var like so:

Change this...

xmlHttp = new XMLHttpRequest();

to this:

var xmlHttp = new XMLHttpRequest();

Rob W's explanation: Currently, you're assigning xmlHttp as a global variable. Because of this, you can only have one variable called xmlHttp...

If you use var before a variable, the variable is defined within the local scope allowing you to use re-define the variable multiple times.