can someone please help me with this code, i’m missing something but can’t figure out what. When you select one of the items in the first list, it brings up the next box but there are no options to select and the same again with the 3rd option although i don’t even get the box to appear this time.
I need about around 10 dropdown lists in total and after each selection has been selected to update the price at the bottom using the price column in the sql table ( I have no idea how to do this) so all your help will be great, been looking at this for at least 4 hours now and i’m getting no where.
Thanks
here is the html:
<body>
<select style="width: 150px;" name="country" id="add-event-dialog-country" onchange="getState(this.value)">
<?php
echo "<option selected='selected' disabled='disabled'> Select Country</option>";
$result = mysql_query("SELECT DISTINCT country FROM country");
while($row = mysql_fetch_array($result)){
echo "<option value='".$row['country']."'>".$row['country']."</option>";
}
?>
</select>
<p id="statediv">
<select style="width: 150px;" name="add-event-dialog-state" id="add-event-dialog-location" disabled="disabled">
<option>Select State</option>
</select>
</p>
<p id="citydiv">
<select style="width: 150px;" name="add-event-dialog-city" id="add-event-dialog-city" disabled="disabled">
<option>Select City</option>
</select>
</p>
Price =<br>
VAT = <br>
Total Price = <br>
</body>
Here’s the js script:
<script language="javascript" type="text/javascript">
function getXMLHTTP() {
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getState(country_Id) {
var strURL="findState.php?country="+country_Id;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('statediv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
function getCity(country_Id,state_id) {
var strURL="findCity.php?country_name="+country_Id+"&state_name="+state_Id;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('citydiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
Here’s the findState.php
<?php
include 'classes.php';
$country = $_GET['country'];
$query="SELECT state_name FROM state WHERE country_id='$country'";
$result=mysql_query($query) or die(mysql_error());
?>
<select style="width: 150px;" id="add-event-dialog-location" name="add-event-dialog- location" onchange="getZone('<?=$country?>',this.value)">
<option selected='selected' disabled='disabled'>Select State</option>
<?php
while($row = mysql_fetch_array($result)){
echo "<option value='".$row['state_name']."'>".$row['state_name']."</option>";}
?>
</select>
Here’s the findCity.php
<?php
include 'classes.php';
$country_id = $_GET['country'];
$state_Id = $_GET['state'];
$query="SELECT city_name FROM city WHERE country_id='1' AND state_id='1'";
$result=mysql_query($query) or die(mysql_error());
?>
<select style="width: 150px;" id="add-event-dialog-location" name="add-event-dialog- location" onchange="getZone('<?=$country?>',this.value)">
<option selected='selected' disabled='disabled'>Select State</option>
<?php
while($row = mysql_fetch_array($result)){
echo "<option value='".$row['city_name']."'>".$row['city_name']."</option>";}
?>
</select>
My SQL Database has 3 tables
1st table called country with 3 columns
id, country and price
2nd table called state with 4 columns
id, country_id, state_name and price
and 3rd table called city with 5 columns
id, country_id, state_id, city_name and price
In both findState.php and findCity.php you call the javascript function getZone when the selectlists changes? And I can’t see that you have declared that function any where.
And you add both the state and city selectlist with the same id. I don’t think that it is the cause of your problems, but it could be later on.
EDIT:
It seems you submit the country id in a variable called country_name but you try to access it in php by country and the same happens with findCity
EDIT 2:
Try changing your findstate.php to this
The problem seems to be that php doesn’t recognize that you are trying to insert the country id into the html select element. By echo’ing out everything this should be easier.