peace be with you All, i am new to using Ajax , the issue is, i am having 3 drop down lists connected to a database, the first one is "name" and the second one is "age" and the third one is "country"! so, i have connected to the database, and retrieved data from it in the first list "name" and then using Ajax, i have successfully retrieved matching data after selecting any option of first list and put them into the second list called "age", the problem is that when i use a very exact same way with the second list called "age" to retrieve matching data into third list called "country" it doesn't work! so please help me cuz, i am using this example to learn Ajax and then apply on a larger real project! here is the code :- firstly, the home.php page:-
<?php
include "config.php";
?>
<html>
<head>
<script type="text/javascript">
function agematch() {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('age').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET', 'connection.inc.php?name='+document.ajax.name.value, true );
xmlhttp.send();
}
function countrymatch() {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('country').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET', 'country.inc.php?age='+document.ajax.age.value, true );
xmlhttp.send();
}
</script>
</head>
<body>
<form id="ajax" name="ajax" >
Choose your name : <select name="name" id="name" select="selected" onchange="agematch();"> <option> </option>
<?php
$query = "SELECT DISTINCT name FROM info";
$result = mysql_query($query);
while($row = mysql_fetch_array($result)){
echo"<option value ='".$row[0]."'> '".@$row[0]."'</option>";
}
?>
</select>
Age : <select id="age" name="age" onchange="countrymatch();"> </select>
country : <select id="country" name="country"> <option> </option> </select>
</form>
</body>
</html>
now, the page for first Ajax call :-
<?php
include "config.php";
echo " <option> </option> " ;
if(isset( $_GET['name']) ) {
@$name = $_GET['name'];
}
$query = "SELECT age FROM info WHERE name = '".@$name."' ";
$result = mysql_query($query);
while ($query_row = mysql_fetch_array($result)) {
echo " <option value ='".$query_row[0]."'> $query_row[0]</option> ";
}
?>
Now, with the page for the second Ajax call for the third drop menu :-
<?php
include "config.php";
if (isset( $_GET['age']) ) {
@$age=$_GET['age'];
}
$query = "SELECT country FROM info WHERE name='".@$name."' AND age='".@$age."' ";
$result= mysql_query($query);
while ($query_row = mysql_fetch_array($result)) {
echo " <option value = '".$query_row[0]."'> $query_row[0] </option> ";
}
?>
so as you see, here is the code, and of course i am connected to the database through a page called "config.php", so i want you to help me to solve this issue and retrieve the data from database into the third drop down list "country". Thanks in Advance!
Ok, Musa here is the edit :-
function countrymatch() {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('country').innerHTML = xmlhttp.responseText;
}
}
var age = encodeUriComponent(document.ajax.age.value),
var name = encodeUriComponent(document.ajax.name.value),
xmlhttp.open('GET', 'country.inc.php?age='+age+'&name'+name, true );
xmlhttp.send();
}
and also :-
<?php
include "config.php";
if (isset($_GET['age'], $_GET['name']) ) {
@$age=$_GET['age'];
@$name = $_GET['name'];
}
$query = "SELECT country from info where name='".@$name."' AND age='".@$age."' ";
$result= mysql_query($query);
while ($query_row = mysql_fetch_array($result)) {
echo " <option value = '".$query_row[0]."'> $query_row[0] </option> ";
}
?>
I don't get any error messages, i am sure your point is right but this solution didn't work unfortunately! thank you so much for helping me :)
