Jump to content

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

man5

By man5
in PHP Coding Help

 Share
Go to solution Solved by man5,

Recommended Posts

man5 Regular Member

man5

Posted
Posted

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		
	}
man5 Regular Member

man5

Posted
  • Author
Posted (edited)

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		
	}
Edited by man5
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.