Hey guys,
I am trying to create a chained list here. I want the user to choose something on the first 4 drop down list and once the last one is chosen, another one is supposed to pop up. I am just testing my code right now and for some reason the my codes are not showing the dropdown list that is supposed to be shown when the last input is changed.
This is my java script
function GetXmlHttpObject(){
var objXMLHttp = null;
if(window.XMLHttpRequest){
objXMLHttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp;
}
function stateChanged(n){
if(xmlHttp.readyState == 4 || xmlHttp.readyState == "complete"){
alert(xmlHttp.responseText);
document.getElementById("yearSelect").innerHTML = xmlHttp.responseText;
}
}
function showTest(v,p,r){
alert("HI");
}
function showBoxes(v,p,r){
xmlHttp=GetXmlHttpObject();
url="";
if(v == 1){
//by year
xmlHttp.onreadystatechange=stateChanged("yearSelect");
url = 'result.php?sid=' + Math.random() + '&type=1&product=' + p + '&vendor=' + r;
}else if(v == 2){
xmlHttp.onreadystatechange=stateChanged("monthSelect");
url = 'result.php?sid=' + Math.random() + '&type=2&product=' + p + '&vendor=' + r;
//by month
}else if(v == 3){
xmlHttp.onreadystatechange=stateChanged("weekSelect");
url = 'result.php?sid=' + Math.random() + '&type=3&product=' + p + '&vendor=' + r;
// by week
}
//url.replace(" ","%20"); <-- Do I need to do this?
alert(url);
xmlHttp.open("GET",url,true);
xmlHttp.send();
}
This is my result.php. Right now, it is very simple it just returns the select tags.
<?php
?>
<select>
<option value=2001>2001</option>
</select>
<?php
?>
This is the first thing that user sees. There are some php method that are used here like getClients() it just puts some stuff inside the my drop down.
<html>
<head>
<title>LeadQual Reporting</title>
<script language="javascript" src="../lqcharts/fusioncharts_js/FusionCharts.js"></script>
<script language="javascript" src="ajax.js"></script>
</head>
<body>
<div>
<form method='post' action='result.php'>
<select name ='client'>
<?php
$clients = ChartData::getClients();
foreach($clients as $k){
echo "<option value='$k'>$k</option>";
}
?>
</select>
<br/>
<select name="products" id="productsResult">
<option>
<?php
$products = ChartData::getProducts();
foreach($products as $p){
echo "<option value='$p'>$p</option>";
}
?>
</option>
</select>
<br/>
<select name="vendors" id="vendorsResult">
<option>
<?php
$vendors = ChartData::getVendors();
foreach($vendors as $v){
echo "<option value='$v'>$v</option>";
}
?>
</option>
</select>
<br/>
<select name="view" id="chooseView" onchange="showBoxes(this.value, document.getElementById('productsResult').value, document.getElementById('vendorsResult').value)">
<option value=0>Select Option</option>
<option value=1>By Year</option>
<option value=2>By Month</option>
<option value=3>By Week</option>
</select>
<div id="yearSelect">
</div>
<div id="monthSelect">
</div>
<div id="weekSelect">
</div>
</form>
</div>
<div>
</div>
</body>
</html>