IE8 is breaking my AJAX... FF is fine.

Question

Hi,

Feeling very proud of myself after creating a form with an AJAX submit, I test it in IE8 and get "Message: 'quantity' is undefined". I've read that it could be something to do with the fact that earlier versions of IE used ActiveX for AJAX requests, but I'm very new to JS and have no real understanding of the problem, let alone the ability to implement a fix.

Any help would be greatly appreciated.

Thanks,

Jack

Here's my code:

var time_variable;

function getXMLObject()  //XML OBJECT
{
  var xmlHttp = false;
   try {
     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers
   }
   catch (e) {
     try {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+
     }
     catch (e2) {
       xmlHttp = false   // No Browser accepts the XMLHTTP Object then false
     }
   }
   if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
     xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers
   }
   return xmlHttp;  // Mandatory Statement returning the ajax object created
}

var xmlhttp = new getXMLObject();   //xmlhttp holds the ajax object

function ajaxFunction() {
  var getdate = new Date();  //Used to prevent caching during ajax call
  if(xmlhttp) { 
    var txtname = document.getElementById("txtname");
    xmlhttp.open("POST","slots.php",true); //calling     testing.php using POST method
    xmlhttp.onreadystatechange  = handleServerResponse;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send("quantity=" + quantity.value + "&price=" + price.value + "&slot=" +         slot.value + "&store=" + store.value); //Posting txtname to PHP File


  }
}

function handleServerResponse() {
   if (xmlhttp.readyState == 4) {
     if(xmlhttp.status == 200) {
       document.getElementById("message").innerHTML=xmlhttp.responseText; //Update the     HTML Form element 
     }
     else {
        alert("Error during AJAX call. Please try again");
     }
   }

}

Answer 1

If quantity is a form field you need to get it using getElementById before using it just like you did with txtname:

var quantity = document.getElementById("quantity");

You cant use it directly from the form.

Answer 2

From your last comment on your question, I suspect you are not defining 'quantity' anywhere and assuming that it will reference the form field. Try this:

if(xmlhttp) { 
    var txtname = document.getElementById("txtname");
    var quantity = document.getElementById("quantity");
    var price = document.getElementById("price");
    var store = document.getElementById("store");
    xmlhttp.open("POST","slots.php",true); //calling     testing.php using POST method
    xmlhttp.onreadystatechange  = handleServerResponse;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send("quantity=" + quantity.value + "&price=" + price.value + "&slot=" +               slot.value + "&store=" + store.value); //Posting txtname to PHP File
}