Multiple javascript confirms

Question

I have a form, on the first 3 input fields (fname, lname, addr) there is an onkeyup function which checks the inputs value against a database. If there is a single match, the function offers a popup (javascript confirm) which asks if the record in the database is correct, if so will prepopulate the fields.

Problem is, most people can type faster than the function can check. If the function finds a match with "smi" but the users types "smith" before the pop up, then the confirm will appear 3 times consecutively.

What can be done about this?

Here's what I've tried, no luck

    function startAjax(){
    if(document.getElementById("flag").value == "yes"){
        if (window.XMLHttpRequest){ xmlhttpp=new XMLHttpRequest(); }else{ xmlhttpp=new ActiveXObject("Microsoft.XMLHTTP"); }
        xmlhttpp.onreadystatechange=function(){
            if(xmlhttpp.readyState==4 && xmlhttpp.status==200){
                    var status = xmlhttpp.responseXML.getElementsByTagName('status')[0].firstChild.nodeValue;
                    var fname = xmlhttpp.responseXML.getElementsByTagName('fname')[0].firstChild.nodeValue;
                    var addr = xmlhttpp.responseXML.getElementsByTagName('addr')[0].firstChild.nodeValue;
                    var lname = xmlhttpp.responseXML.getElementsByTagName('lname')[0].firstChild.nodeValue;
                    var city = xmlhttpp.responseXML.getElementsByTagName('city')[0].firstChild.nodeValue;
                    var state = xmlhttpp.responseXML.getElementsByTagName('street')[0].firstChild.nodeValue;
                    var zip = xmlhttpp.responseXML.getElementsByTagName('zip')[0].firstChild.nodeValue;
                    var email = xmlhttpp.responseXML.getElementsByTagName('email')[0].firstChild.nodeValue;

                    document.getElementById("ajax_status").innerHTML=status;
                    if(status == "Found user"){
                        document.getElementById('pop_display').style.display = "block";
                        var confirmMsg = "*User Found*\n\nName: "+fname+" "+lname+"\nAddress: "+addr+"\nCity: "+city+"\nState: "+state+"\nZip: "+zip+"\nEmail: "+email+"\n\nClick 'OK' To populate fields or click 'Cancel' if this is not the correct info.";
                        var fillOrNot = confirm(confirmMsg);
                        if(fillOrNot === true){                     
                            document.getElementById('fname').value = fname;
                            document.getElementById('lname').value = lname;
                            document.getElementById('address').value = addr;
                            document.getElementById('city').value = city;
                            document.getElementById('state').value = state;
                            document.getElementById('zip').value = zip;
                            document.getElementById('email').value = email.trim();
                            document.getElementById('flag').value="no";
                        }else{
                            document.getElementById('flag').value="yes2";
                            document.getElementById("ajax_status").innerHTML="Aborted";
                        }
                        document.getElementById('pop_display').style.display = "none";
                    }                   
            }
        }
        var param1 = document.getElementById('fname').value;
        var param2 = document.getElementById('lname').value;
        var param3 = document.getElementById('address').value;
        var url = "https://www.mywebsite.com/ajaxhandler.php?fname="+param1+"&lname="+param2+"&addr="+param3;
        xmlhttpp.open("GET",url,true);
        xmlhttpp.send(null);
    }
}

Answer 1

Use 'blur' of javascript or 'onfocusout' of jQuery instead of 'onkeyup'

Answer 2

Add a variable outside startAjax, like 'checking', that you will set to 'true' when you are waiting for the response from database - once you receive the responce, set it to 'false.' Then, in the point of your code where you're calling the database, check whether or not you're already waiting for a responce (if you are, just skip the call altogether)

It also helps to delay the first call by a bit, like 100 milliseconds, so the user can enter a couple of characters before it - javascript's timeout will do the job.