AJAX PHP Call With Multiple Inputs

Question

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

Add an id to each input and then use document.getElementById('id').value to get the values. e.g. strName = document.getElementById('name').value; strCompany = document.getElementById('company').value; then livesearch.php?name="+strName + "&company=" + strCompany — Daren Chandisingh
– Daren Chandisingh, Commented Sep 21, 2017 at 11:24

Joe Keene · Accepted Answer · 2017-09-21 12:34:35Z

1

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>

edited Sep 21, 2017 at 12:34

answered Sep 21, 2017 at 11:23

Joe Keene

2,36124 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Richard Owens Over a year ago

Thanks for this - I like the pre-concat idea. I had to make a few edits to get it to work. Firstly, the if (str.length){ was amended to ask if either of the 2 specific field ids were not null. Secondly, when calling the xmlhttp.open line, you need to include the values: So name.value and company.value. Then it all worked perfectly. Thanks!!

Joe Keene Over a year ago

No problem glad it helped :)

Richard Owens Over a year ago

Just added a few edits in case you didn't see them :)

Joe Keene Over a year ago

Cool, would be interested to see you fuzzy php search...unless it's top secret ofcourse ;)

Richard Owens Over a year ago

You're welcome to have the code - can I contact you direct?

Collectives™ on Stack Overflow

AJAX PHP Call With Multiple Inputs

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related