Jump to content

Dual selection TAGS with AJAX\PHP


Aviway
 Share

Recommended Posts

Hello,I need help writing a code in AJAX. I have a form where you had to choose an area in the country,and after selecting the regionin the country,another SELECT tag will only see the cities that are in the selected area.The PHP\HTML code:

<select id="area" name="area"><?phpforeach ($get_all_area as $key => $val){  echo '<option onclick="change_city('.$val['area_id'].')" value="'.$val['area_id'].'">'.$val['area_name'].'</option>';}?></select> ]<select id="city" name="city"><!-- All cities are in the selected area --></select> 

Edited by Aviway
Link to comment
Share on other sites

what part are you having trouble with? I don't see any Javascript in there. What have you tried? What are you stuck on?
function change_city(area_id){document.getElementById('city_loader').style.display='block';var xmlhttp;   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)  {   var result = xmlhttp.responseText;   if (result)    document.getElementById('city_loader').style.display='none';       document.getElementById('error_log').innerHTML='PROBLAM!';  }}xmlhttp.open("GET","pages/update/change_city_by_area.php?area_id="+encodeURIComponent(area_id),true);xmlhttp.send(null);}

This is the function that call with "onclick" event. My problam is how to include the array that I'm returned from "change_city_by_area.php", inside the other SELECT TAG(city). I use this ajax code for a lot of things but i never used it to get response with array.

Link to comment
Share on other sites

you would need to create a loop, to iterate over the results, and use a technique for building up a string or documentFragment of option tags that you can insert into the select tag. basically, you need to do what you are doing in PHP to initially display all the areas, but do it in JS and use simple DOM methods to insert the cities output into the DOM.

Link to comment
Share on other sites

IF you have already created a working php file change_city_by_area.php that will echo the results of the cities to the area selected, you use the variable result to apply the returned result (xmlhttp.responseText) to the required id ref document.getElementById(city').innerHTML=result;

  if (xmlhttp.readyState==4 && xmlhttp.status==200)  {   var result = xmlhttp.responseText;   if (result){	 document.getElementById(city').innerHTML=result;}else{	document.getElementById('city_loader').style.display='none'; // guessing this is what you are looking for these	document.getElementById('error_log').innerHTML='PROBLAM!'; // guessing this is what you are looking for these}}

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...