Passing Multiple Form Arguments to a Function - Live Search

[jnorman]

I was able to complete a live search with a T-SQL database similar to the design found here on W3Schools, though now I am running into some difficulties passing multiple arguments/parameters to the JavaScript search page. Basically, we thought it would be a good idea to let people search by just a first name or last name if they wanted, as well as searching by their affiliation. Here is an excerpt from the form that appears to be giving me the problems:

<form><input type="text" name="name" id="nameID" size="40" maxlength="64" onKeyUp="showNames('nameID', 'typeID', 'firstLastID')"onblur="if (this.value == '') this.value = this.defaultValue" onFocus="if (this.value == this.defaultValue) this.value = ''"value="Enter a name or a part of a name here"> <br><select name="type" id="typeID" onChange="showNames('nameID', 'typeID', 'firstLastID')"><option value="All">Members & Staff</option><option value="Member">Member</option><option value="Staff">Staff</option></select> <br><select name="firstLast" id="firstLastID" onChange="showNames('nameID', 'typeID', 'firstLastID')"><option value="Both">First & Last Name</option><option value="First">First Name</option><option value="Last">Last Name</option></select></form>

Right now the form is passing the literal names of nameID, typeID, and firstLastID when I echo the variables in a separate PHP file. I've tried single quotes (which gives the literal names), double quotes (does not work), and no quotation marks (does not work) around the arguments just to see if that was the culprit, but no luck there. Before using the ID's I had been using "this.value", though unfortunately I couldn't use that any longer once we added the additional arguments to showNames(). Finally, I tried removing all of the arguments from showNames() and collecting the data using "document.getElementByID('...').value" (where '...' is the ID) in the JavaScript function, but that didn't work either. Can anyone help me figure this out? Thank you!

[niche]

Since you're using the W3schools script as the base, how are you sending the request to your php script?

Edited May 17, 2012 by niche

[ShadowMage]

Can you post the showNames function?

[jnorman]

I figured out what I did... Simply forgot to change something in one place when I made a change in another. Anyway, in case someone else is having problems with sending multiple parameters to a live search, here's some code to help... The form itself:

<form><input type="text" name="name" id="nameID" size="40" maxlength="64" onKeyUp="showNames()"onblur="if (this.value == '') this.value = this.defaultValue" onFocus="if (this.value == this.defaultValue) this.value = ''"value="Enter a name or a part of a name here"> <br><select name="type" id="typeID" onChange="showNames()"><option value="All">Members & Staff</option><option value="Member">Member</option><option value="Staff">Staff</option></select> <br><select name="firstLast" id="firstLastID" onChange="showNames()"><option value="Both">First & Last Name</option><option value="First">First Name</option><option value="Last">Last Name</option></select></form>

And the JavaScript with the showNames() function, modeled after the one here on W3Schools:

function showNames(){// Variables are collected by their form IDvar getName = document.getElementById('nameID').value;var getType = document.getElementById('typeID').value;var getFirstLast = document.getElementById('firstLastID').value; if (getName == "")//if (getName.length < 3){  document.getElementById("getResults").innerHTML="";  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 (xmlhttp.readyState==4 && xmlhttp.status==200)  {   document.getElementById("getResults").innerHTML=xmlhttp.responseText;  }} xmlhttp.open("GET", "findem.php?name=" + escape(getName) + "&type=" + getType + "&firstLast=" + getFirstLast, true);xmlhttp.send();}

Note you'll still need a PHP file to return the results which you can model after the ones found on W3Schools. Later.