CODEWITHSUNDEEP
phpajax
Richard Owens
Richard Owens

Reputation: 155

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

Upvotes: 0

Views: 211

Answers (1)

Joe Keene
Joe Keene

Reputation: 2351

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>

Upvotes: 1

Related Questions