Aviway Posted April 28, 2012 Share Posted April 28, 2012 (edited) 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 April 28, 2012 by Aviway Link to comment Share on other sites More sharing options...
thescientist Posted April 28, 2012 Share Posted April 28, 2012 what part are you having trouble with? I don't see any Javascript in there. What have you tried? What are you stuck on? Link to comment Share on other sites More sharing options...
Aviway Posted April 28, 2012 Author Share Posted April 28, 2012 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 More sharing options...
dsonesuk Posted April 28, 2012 Share Posted April 28, 2012 (edited) You would use the onchange event on the select element, not onclick on option element to run the function. <select id="area" name="area" onchange="change_city(this.value)"> Edited April 28, 2012 by dsonesuk Link to comment Share on other sites More sharing options...
thescientist Posted April 28, 2012 Share Posted April 28, 2012 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 More sharing options...
Aviway Posted April 28, 2012 Author Share Posted April 28, 2012 (edited) I'm sorry' but can you explain to me with code, becouse I dont know how to do it! Edited April 28, 2012 by Aviway Link to comment Share on other sites More sharing options...
Aviway Posted April 28, 2012 Author Share Posted April 28, 2012 Sorry about the spam, but can someone help me? Link to comment Share on other sites More sharing options...
dsonesuk Posted April 28, 2012 Share Posted April 28, 2012 (edited) 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 April 28, 2012 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now