Jump to content

Passing Multiple Form Arguments to a Function - Live Search


Recommended Posts

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!

Link to post
Share on other sites

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

Edited by niche
Link to post
Share on other sites

I figured out what I did... Simply forgot to change something in one place when I made a change in another. :facepalm: 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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...