Richard Owens Richard Owens - 1 month ago 10
Ajax Question

AJAX PHP Call With Multiple Inputs

I hope someone can help a bit with this..

My html/php isn't too shabby but my js is pretty much Copy/Paste so bear with me...

Pretty simple - I have two form fields which I want to pass to a php script asynchronously.

html



<form>
<input type="text" size="30" onKeyUp="showResult(this.value)" autocomplete="off" placeholder="Name">
<input type="text" size="30" onKeyUp="showResult(this.value)" autocomplete="off" placeholder="Company">
<div id="livesearch" class="livesearch"></div>
</form>





ajax js



var delayTimer;// delay to prevent searches on every key up
function showResult(str) {

clearTimeout(delayTimer);
delayTimer = setTimeout(function() {

//AJAX stuff
if (str.length==0) {
document.getElementById("livesearch").innerHTML="";
//document.getElementById("livesearch").style.border="0px";
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 (this.readyState==4 && this.status==200) {
document.getElementById("livesearch").innerHTML=this.responseText;
//document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();

}, 300);//1000 is 1 second
}//end function showResult





The php gets a bit complex as it's using fuzzy logic but essentially its using the $_GET["q"] string and echoing back a response to #livesearch.

What I can't figure in the javascript is how to pass two strings (or a concatenated string with a separator) to my php so that I can process them independently.

Does this make sense? Please forget the woeful lack of sanitisation at this stage :)

Any help would be greatly appreciated.

Richard

Answer Source

Add an ID to each field then onKeyup call the values function which gets both values. And in turn passes over both name and company separately as GET['name'] and GET['company']. You could have them as one string if you prefer but this way feels neater.

  

var delayTimer;// delay to prevent searches on every key up
function showResult() {

    var name = document.getElementById("name");
    var company = document.getElementById("company");

    clearTimeout(delayTimer);
    delayTimer = setTimeout(function () {

        //AJAX stuff
        if (str.length == 0) {
            document.getElementById("livesearch").innerHTML = "";
            //document.getElementById("livesearch").style.border="0px";
            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 (this.readyState == 4 && this.status == 200) {
                document.getElementById("livesearch").innerHTML = this.responseText;
                //document.getElementById("livesearch").style.border="1px solid
                // #A5ACB2";
            }
        }
        xmlhttp.open("GET", "livesearch.php?name=" + name + "&company=" + company, true);
        xmlhttp.send();

    }, 300);//1000 is 1 second
}//end function showResult
<form>
    <input type="text" size="30" onKeyUp="showResult()" autocomplete="off" placeholder="Name" id="name">
    <input type="text" size="30" onKeyUp="showResult()" autocomplete="off" placeholder="Company" id="company">
    <div id="livesearch" class="livesearch"></div>
</form>