how to work with multiple ajax? - php

Question

i am using ajax to get data in Date Label, bt it is not working. Details() function is working , but showDate() is stucked. How i get the data in dt id??
<label><b>From</b></label>
<select id="f" onchange="Details();"><?php echo $coptions; ?></select>
<label><b>Destination</b></label>
<select id="d" onchange="Details();"><?php echo $coptions; ?></select>
<label><b>Flight Name</b></label>
<select id="list" onchange="showDate();" ></select>
<label><b>Date</b></label>
<select id="dt" ></select>
<button >Go</button>
here is my ajax functions:
function Details()
{
var xmlhttp;
var fname = document.getElementById("f").value;
var dname = document.getElementById("d").value;
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)
{
document.getElementById("list").innerHTML=xmlhttp.responseText;
showDate();
}
}
xmlhttp.open("GET","route.php?q="+fname+"&w="+dname,true);
xmlhttp.send();
//loadDetails();
}
function showDate()
{
var xmlhttp;
var ex=document.getElementById("list");
var id=ex[ex.selectedIndex].id;
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("dt").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","schdl2.php?f="+id,true);
xmlhttp.send();
//loadDetails();
}
my schdl2.php page is like this:
<?php
session_start();
require_once("dbconnect.php");
$fl=$_REQUEST['f'];
$sql= "SELECT date FROM schedule where flight='$f1'";
$rslt = mysql_query($sql);
$foptions="";
while ($row=mysql_fetch_array($rslt))
{
$rd=$row["date"];
$foptions.="<option>$rd<option>";
}
echo $foptions;
?>
is there is any efficient way??

Answer 1

I made some tests, and your id var is always empty; so i change your code like this:
This:
var id=ex[ex.selectedIndex].id;
By this on the showDate function:
var id = document.getElementById("list").value;
Jsfiddle here: http://jsfiddle.net/x97jn/

Answer 2

You can work with JQuery ajax.
$( document ).ready(function() {
$.ajax({
url: "ajax-1.php",
context: document.body
}).done(function(data) {
$('#result-1').html(data);
});
$.ajax({
url: "ajax-2.php",
context: document.body
}).done(function(data) {
$('#result-2').html(data);
})
});