Need bit of help with multiple ajax dropdowns. I have two already working.

man5 · April 5, 2014

I was following a tutorial from else where that showed how to do dynamic dropdown with ajax. Unfortunatly he only does it for two drop downs. I need a third dropdown. I have a dropdown for select country and select region. They work great. How can I add the select city dropdown as well with js?

js code on index.php

<html>
<head>	
	<script>
		function showHint(str) {
			var xmlhttp;
			if (str.length==0) {
			document.getElementById("regiondiv").innerHTML="";
			return;
			}
			if (window.XMLHttpRequest) {
			xmlhttp=new XMLHttpRequest();
			}
			else {
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=function() {
				if (xmlhttp.readyState==4 && xmlhttp.status==200) {
				document.getElementById("regiondiv").innerHTML=xmlhttp.responseText;
				}
			}
			xmlhttp.open("GET","geo.php?country="+str,true);
			xmlhttp.send(null);
		}
	</script>
</head>
<body>	

	<div class="field">
		<label for="cat">Country</label>
		<select id="country" name="country" onChange="showHint(this.value);" required >
		
			<option value="0">--Select Country--</option>
			
			<?php  
				$getCountry = DB::getInstance()->query("SELECT * FROM countries");
				
				if(!$getCountry->count()) {
				
					echo 'No Country found!';
					
				} else {
				
					foreach($getCountry->results() as $row) {
					
						$country_id		=	escape($row->countryId);
						$country_name	=	escape($row->countryName);
				
				 ?><option value="<?php echo $country_id; ?>" ><?php echo $country_name; ?></option><?php
				 
					}
				}
			?>
			
			
		</select>
		
	</div>

	<label for="cat">Region</label>
	<div id="regiondiv">
		<select name="region" id="region">
		<option>--Select State--</option>
		<option></option>
	</div>

</body>
</html>

ajax.php

<?php require_once 'core/init.php';

$country_id  =  escape(Input::get('country'));

$select_region = DB::getInstance()->get('regions', array('countryId', '=', $country_id));
	
	if(!$select_region->count()) {
	
		echo 'No Country found!';
		
	} else {

	?><select name="region" id="region"><?php	
	
		foreach($select_region->results() as $row) {
		
			$region_id			=	escape($row->regionId);
			$region_name		=	escape($row->regionName);
	
		?><option value="<?php echo $region_id; ?>" ><?php echo $region_name; ?></option><?php
	 
		}
	?></select><?php		
	}

Rifts · April 5, 2014

just copy what u have and change it for city?

man5 · April 6, 2014

just copy what u have and change it for city?

I did that, it's not working correctly. For eg. here is the updated code.

index.php with js code

<html>
<head>	
	<script>
		function showHint(str) {
			var xmlhttp;
			if (str.length==0) {
			document.getElementById("regiondiv").innerHTML="";
			return;
			}
			if (window.XMLHttpRequest) {
			xmlhttp=new XMLHttpRequest();
			}
			else {
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=function() {
				if (xmlhttp.readyState==4 && xmlhttp.status==200) {
				document.getElementById("regiondiv").innerHTML=xmlhttp.responseText;
				}
			}
			xmlhttp.open("GET","geo.php?country="+str,true);
			xmlhttp.send(null);
		}

                function showHintNEW(str) {
			var xmlhttp;
			if (str.length==0) {
			document.getElementById("citydiv").innerHTML="";
			return;
			}
			if (window.XMLHttpRequest) {
			xmlhttp=new XMLHttpRequest();
			}
			else {
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=function() {
				if (xmlhttp.readyState==4 && xmlhttp.status==200) {
				document.getElementById("citydiv").innerHTML=xmlhttp.responseText;
				}
			}
			xmlhttp.open("GET","geo.php?region="+str,true);
			xmlhttp.send(null);
		}     
	</script>
</head>
<body>	

	<div class="field">
		<label for="cat">Country</label>
		<select id="country" name="country" onChange="showHint(this.value);" required >
		
			<option value="0">--Select Country--</option>
			
			<?php  
				$getCountry = DB::getInstance()->query("SELECT * FROM countries");
				
				if(!$getCountry->count()) {
				
					echo 'No Country found!';
					
				} else {
				
					foreach($getCountry->results() as $row) {
					
						$country_id		=	escape($row->countryId);
						$country_name	=	escape($row->countryName);
				
				 ?><option value="<?php echo $country_id; ?>" ><?php echo $country_name; ?></option><?php
				 
					}
				}
			?>
			
			
		</select>
		
	</div>

	<label for="cat">Region</label>
	<div id="regiondiv">
		<select name="region" id="region" onChange="showHintNEW(this.value);">
		<option>--Select State--</option>
		<option></option>
	</div>

     <label for="cat">City</label>
	<div id="citydiv">
		<select name="city" id="city">
		 <option>--Select city--</option>
		   <option></option>
	</div>

</body>
</html>

geo.php

<?php require_once 'core/init.php';

$country_id  =  escape(Input::get('country'));
$region_id   =  escape(Input::get('region'));

$select_region = DB::getInstance()->get('regions', array('countryId', '=', $country_id));
	
	if(!$select_region->count()) {
	
		echo 'No Country found!';
		
	} else {

	?><select name="region" id="region" ><?php	
	
		foreach($select_region->results() as $row) {
		
			$region_id			=	escape($row->regionId);
			$region_name		=	escape($row->regionName);
	
		?><option value="<?php echo $region_id; ?>" ><?php echo $region_name; ?></option><?php
	 
		}
	?></select><?php		
	}



$select_city = DB::getInstance()->get('cities', array('regionId', '=', $region_id));
	
	if(!$select_city->count()) {
	
		echo 'No region found!';
		
	} else {

	?><select name="city" id="city" ><?php	
	
		foreach($select_city->results() as $row) {
		
			$city_id			=	escape($row->cityId);
			$city_name			=	escape($row->cityName);
	
		?><option value="<?php echo $city_id; ?>" ><?php echo $city_name; ?></option><?php
	 
		}
	?></select><?php		
	}

man5 · April 6, 2014

I have manged to solve this problem.

Sign In

Need bit of help with multiple ajax dropdowns. I have two already working.

Recommended Posts

man5

Link to comment

Share on other sites

Rifts

Link to comment

Share on other sites

man5

Link to comment

Share on other sites

man5

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information