Piotrbaz Posted September 18, 2012 Share Posted September 18, 2012 (edited) 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 September 18, 2012 by Piotrbaz Link to comment Share on other sites More sharing options...
niche Posted September 18, 2012 Share Posted September 18, 2012 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 comment Share on other sites More sharing options...
Piotrbaz Posted September 18, 2012 Author Share Posted September 18, 2012 (edited) 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: Hope I made it more clear Edited September 18, 2012 by Piotrbaz Link to comment Share on other sites More sharing options...
niche Posted September 18, 2012 Share Posted September 18, 2012 (edited) 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 September 18, 2012 by niche 1 Link to comment Share on other sites More sharing options...
Piotrbaz Posted September 18, 2012 Author Share Posted September 18, 2012 (edited) 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 Edited September 18, 2012 by Piotrbaz Link to comment Share on other sites More sharing options...
smiles Posted September 18, 2012 Share Posted September 18, 2012 Put id for two selects<select id="users" name="users" ..><select id="age" name="age" ...> Just onchange=showUser()function showUser(){ var age = document.getElementById("age").value; var user = document.getElementById("users").value; ...} 1 Link to comment Share on other sites More sharing options...
Piotrbaz Posted September 19, 2012 Author Share Posted September 19, 2012 (edited) Well, sounds great 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 Edited September 19, 2012 by Piotrbaz Link to comment Share on other sites More sharing options...
justsomeguy Posted September 19, 2012 Share Posted September 19, 2012 This is how you get the value of the selected option: var user = document.getElementById("users").options[document.getElementById("users").selectedIndex].value; 1 Link to comment Share on other sites More sharing options...
Piotrbaz Posted September 19, 2012 Author Share Posted September 19, 2012 (edited) 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 September 19, 2012 by Piotrbaz Link to comment Share on other sites More sharing options...
justsomeguy Posted September 19, 2012 Share Posted September 19, 2012 That's fine, are you checking for Javascript errors? Have you used your developer tools to check if the ajax request is being sent? Saying that it doesn't work doesn't provide a lot of information about what is happening. 1 Link to comment Share on other sites More sharing options...
Piotrbaz Posted September 19, 2012 Author Share Posted September 19, 2012 (edited) Sorry 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 September 19, 2012 by Piotrbaz Link to comment Share on other sites More sharing options...
justsomeguy Posted September 19, 2012 Share Posted September 19, 2012 You're missing another plus sign after the user variable in the URL. 1 Link to comment Share on other sites More sharing options...
Piotrbaz Posted September 19, 2012 Author Share Posted September 19, 2012 Haha I knew it must have been something that simple Thank you all so much for your help Problem solved ! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now