Sending two variables??

[digi duck]

Hi there. I am trying to create a filtering system for results in a database (i.e. user types in inputs and it only show the results with that text). I have it half working in that they can filter by name and city individually, however i would like it so they can filter by both together. For example if i have the following data:

 

NAME          CITY

john            new york

james          london

bob            tokyo

 

At the moment if they typed in the name filtering box "j" it would show results row john and james, however if they then went and typed in "y" in the city filtering box it would ignore the previous filter and show the john and bob (as y in new york and tokyo). What I want it do is for it to filter both and therefore only show the john row.

 

So far I have the following:

 

For the user submission page

<script type="text/javascript" src="js/filter.js"></script>

<form>
Search by Name:<input type="text" name="name" onkeyup="showName(this.value)">
Search by City:<input type="text" name="city" onkeyup="showCity(this.value)">
</select>
</form>

<div id="row"></div>

 

For the Javascript page I have:

function showName(name)
{
if (name=="")
  {
  document.getElementById("row").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("row").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","results.php?name="+name,true);
xmlhttp.send();
}


function showCity(city)
{
if (city=="")
  {
  document.getElementById("row").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("row").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","results.php?city="+city,true);
xmlhttp.send();
}

 

And lastly for the php file i have:

//get the parameters from URL
$name=$_GET["name"];
$city=$_GET['city'];

//Select Results
$sql="SELECT name, city
FROM $tbl_name WHERE name LIKE '%$name%' AND city LIKE '%$city%'

$result = mysql_query($sql);

while($row = mysql_fetch_array($result))
  {  

  echo "<tr>";
  echo "<td>" . $row['name'] . "</td>";
  echo "<td>" . $row['city'] . "</td>";
   echo "</tr>";
  }

 

I think it is doing this because it only runs one function at a time and this overwrites the last one therefore i think i need a function to send all the parameters at once even if they've not been changed. Unfortunately im very new to programming and have very little experience with javascript so thought id ask the experts.

 

Thanks in advance for your help!!

[digi duck]

Ok for anyone interested i've managed to solve it.

 

I changed the text boxes to have the same function which activated onkeyup

 

this function then saves each value as a variable and adds them on to the url as shown below:

 

function change()
{
var name=document.forms.filter.name.value
var city=document.forms.filter.city.value

if (name=="" & city=="")
  {
  document.getElementById("results").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("results").innerHTML=xmlhttp.responseText;
    }
  }
  
var url="results.php"
url=url+"?name="+name;
url=url+"&city="+city;

xmlhttp.open("GET",url,true);
xmlhttp.send();
}