PHP Javascript AJAX fill and calculate several input fields - only one function fills?

Question

I am trying to fill in a form using Javascript/ajax/php but the problem is that my function only fills in one of the needed forms and stops even tho I have gotten the second response from the server.

Code:

The function that starts filling stuff

function luePankkiviivakoodi(str) {
if (str==null) { //are we NOT injecting variables directly into the code, if not - Prompt for the barcode, and set the variable
    var str = prompt("Valmis vastaanottamaan", "");
}
if (str==null) { //someone pressed abort on the prompt, we return
    return;
}
newstr = str.split(' ').join(''); // remove spaces
if (str=="") { //is the string empty? -> return
    return;
}
if (window.XMLHttpRequest) { //AJAX code
    xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        eval(xmlhttp.responseText);
        //we set some fields, no problem
        document.getElementById('P_VII').value = viite;
        document.getElementById('IBAN').value = saajatili;
        document.getElementById('laskun_summa').value = summa;
        document.getElementById('eräpäivä').value = eräpäivä;
        //trigger other functions
        getKassasumma(summa); //AJAX for accesing the database and calculating the sale price
        DevideIntoCells(); //AJAX for accessing the database and dividing a sum into different cells
        validateSumma(); //Validates the sum, and tells the user if it's OK
    }
}
xmlhttp.open("GET","dataminer.php?question=pankkiviivakoodi&q="+newstr,true);//open AJAX connecttion
xmlhttp.send();//send stuff by AJAX

}

getKassasumma:

function getKassasumma(str) {
if (str=="") {
    return;
}
 if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        eval(xmlhttp.responseText);
    }
}
kale = document.getElementById("TOS_K_ale").value;
xmlhttp.open("GET","dataminer.php?question=kassasumma&q="+str+"&kale="+kale.replace("%", "p")+"&nro="+document.getElementById("S_NRO").value,true);
xmlhttp.send();
}

DevideIntoCells:

function DevideIntoCells() {
    str = document.getElementById('tiliöintitapa').value;
    if (str==null) {
            return;
    }
    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
        document.getElementById("spinwheel3").style.visibility = "visible";
    }
    xmlhttp.onreadystatechange=function() {
        //alert('OK! val= '+xmlhttp.readyState);
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            //alert('OK!');
            eval(xmlhttp.responseText);
            //alert('OK2!');
            document.getElementById("spinwheel3").style.visibility = "hidden";
            //alert('OK3!');
            calculateSumma();
        }
    }
    xmlhttp.open("GET","dataminer.php?question=percentages&q="+str+"&nro="+document.getElementById('S_NRO').value,true);
    xmlhttp.send();
}

validateSumma (just some math):

function validateSumma() {
    float = document.getElementById('summabox').value;
    float = float.replace(",",".");
    summa = parseFloat(float);
    if (summa < 0) {
        summa = 0
    };
    kassasummaunp = document.getElementById('laskun_summa').value;
    kassasummafloat = kassasummaunp.replace(",",".");
    kassasumma = parseFloat(kassasummafloat);
    if (kassasumma < 0) {
        kassasumma = 0
    };
    if (kassasumma == 0 || summa == 0) {
        prosentti = "0%";
    }
    else {
        prosentti = summa / kassasumma * 100;
        prosentti = Math.round(prosentti*Math.pow(10,2))/Math.pow(10,2);
        prosentti = prosentti+"%";
    };
    if (prosentti == "100%") {
        is100 = 1;
    }else {
        is100 = 0;
    }
    document.getElementById('prosentti').innerHTML = prosentti;
    if (is100 == 1) {
        document.getElementById('prosentti').setAttribute("style", "color:green");
    } else {
        document.getElementById('prosentti').setAttribute("style", "color:red");
    }
    puuttuvaEuro();
}

The problem code here is getKassasumma(summa); and DevideIntoCells();. I disable one of them, and the other one works, I enable both of them, DevideIntoCells stops somewhere before document.getElementById("spinwheel3").style.visibility = "hidden";, probably at the eval(response) because getKassasumma already finished the ajax request and killed this one. same the other way around.

AJAX answers: DevideIntoCells:

var KP_osuus = parseFloat('40');
laskunsumma = parseFloat(document.getElementById('laskun_summa').value);
onepercent = laskunsumma/100;
newvalue = onepercent*KP_osuus;
document.getElementById('box1.5').value = newvalue;
var KP_osuus = parseFloat('60');
laskunsumma = parseFloat(document.getElementById('laskun_summa').value);
onepercent = laskunsumma/100;
newvalue = onepercent*KP_osuus;
document.getElementById('box2.5').value = newvalue;

AJAX answer: getKassasumma

var kassasumma = '477.99€';
document.getElementById('kassasumma').value = kassasumma;

Please ask if you need clarification!

EDIT: Just to be clear, this is NOT an AJAX problem, rather javascript.

Answer 1

Try to make xmlhttp local, i.e.

var xmlhttp;

Because you are overwriting you xmlhttp you refer to in the event listeners, so when the listeners get called, they both see the same response.

at the beginning of every of your functions. For compatibility, also use send(null) instead of send().