Jump to content

AJAX Database Example - double select


Recommended Posts

Hello :) I've got a question about "AJAX Database Example" from w3schools page (linked here -> http://www.w3schools...ax_database.asp ) All works perfectly fine, but I want to adjust it to TWO select dropdowns and show the results only after the second one is selected (I pick the first select, then second one and after that results are shown). The problem is, I don't know exactly what I need to change in showUser function. Of course it needs to take 2 parameters and I have to create second select dropdown outside the function, but my knowledge about AJAX is too poor to make it work ; / Will somebody help me ? ; ) If already there is a topic about the same issue I'm really sorry, but I've got some problems with search module on this forum. Kinda doesn't show any results ;x

Edited by Piotrbaz
Link to post
Share on other sites

So, for example, you might want only the lastnames to show initially and display the relevant firstnames when you click on them. Right?

Link to post
Share on other sites

Hmm, I was rather thinking about, (for example), selecting a person ($x), then its age ($y) (from 2nd dropdown) and sending those two variables together to .php file. So my query gets two variables to work with.The result shown would be person(s) aged $y.Like this: 25jfbz7.jpg Hope I made it more clear :P

Edited by Piotrbaz
Link to post
Share on other sites

Crystal clear. Just put those inputs in a form that sends them to a script that uses both inputs in a query so you can display the results. Viola!

Edited by niche
  • Like 1
Link to post
Share on other sites

I figured it would be something like this: SELECT PART:

<select name="users"><option value="">Select a person:</option><option value="1">Lois Griffin</option><option value="2">Glenn Quagmire</option></select> <select name="age" onchange="showUser(? , this.value)"><option value="">Select age</option><option value="20">20</option><option value="40">40</option></select>

I've put 'onchange' attribute into the second select tag, because I want to call the showUser function after the 'age' dropdown is picked. Correct me, if I'm wrong :PEven if it's ok, I still don't know how to put users value into the function call ;x and with that function itself:

function showUser(str,age){if (age=="")  {  document.getElementById("txtHint").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("txtHint").innerHTML=xmlhttp.responseText;	}  }xmlhttp.open("GET","getuser.php?q="+str"&s="+age,true);xmlhttp.send();}

Probably it's incorrect too :sorry:

Edited by Piotrbaz
Link to post
Share on other sites

Well, sounds great :P but doesn't seem to work ;xI've made a small change, instead of "age" I've put a salary field. SELECTs

<body><form><select id="users"><option value="">Select a person:</option><option value="1">Lois Griffin</option><option value="2">Glenn Quagmire</option></select><select id="salary" onchange="showUser()"><option value="">Select salary</option><option value="2000">2000</option><option value="4000">4000</option></select></form><br /><div id="txtHint"><b>Person info will be listed here.</b></div></body>

showUser function

<script type="text/javascript">function showUser(){var user = document.getElementById("users").value;var salary = document.getElementById("salary").value; if (salary=="")  {  document.getElementById("txtHint").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("txtHint").innerHTML=xmlhttp.responseText;	}  }xmlhttp.open("GET","getuser.php?q="+user"&s="+salary,true);xmlhttp.send();}</script>

and of course my .php file which works fine (I double checked ;P)

<?php$q=$_GET["q"];$s=$_GET["s"];$con = mysql_connect('localhost', 'root', '');if (!$con)  {  die('Could not connect: ' . mysql_error());  }mysql_select_db("ajax_demo", $con);$sql="SELECT * FROM user WHERE id = '".$q."' AND salary = '".$s."'";$result = mysql_query($sql);echo "<table border='1'><tr><th>Firstname</th><th>Lastname</th><th>Age</th><th>Hometown</th><th>Job</th></tr>";while($row = mysql_fetch_array($result))  {  echo "<tr>";  echo "<td>" . $row['FirstName'] . "</td>";  echo "<td>" . $row['LastName'] . "</td>";  echo "<td>" . $row['Age'] . "</td>";  echo "<td>" . $row['Hometown'] . "</td>";  echo "<td>" . $row['Job'] . "</td>";  echo "</tr>";  }echo "</table>";mysql_close($con);?>

Must have done something wrong again :P

Edited by Piotrbaz
Link to post
Share on other sites

Still nothing :(So far nobody has said anything about xmlhttp.open function call. Is everything ok with it ?

xmlhttp.open("GET","getuser.php?q="+user"&s="+salary,true);

Edited by Piotrbaz
Link to post
Share on other sites

Sorry :P I checked it with chrome tools and got this: - Uncaught SyntaxError: Unexpected string (which is that xmlhttp.open function call)- Uncaught ReferenceError: showUser is not definedonchange (which of course is about that second select tag) Also:0 / 3 requests ❘ 0B / 1.56KB transferred ❘ 129ms (onload: 153ms, DOMContentLoaded: 125ms)

Edited by Piotrbaz
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...