narjis Posted April 13, 2011 Share Posted April 13, 2011 I want to show one select box in which selecting any option would show another select box of sub fields here's the code. <html> <head> <title>Drop down list usage in AJAX</title> <script type="text/javascript"> function show_second(choice){ var xmlhttp; if(window.XMLHttpRequest){ //for firefox xmlhttp = new XMLHttpRequest(); } else{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("first").innerHtml = xmlhttp.responseText; } } xmlhttp.open("GET","getSecond.php?q="+choice,true); xmlhttp.send(); } </script> </head> <body> <form> <select name ="first" onchange=show_second(this.value)> <option value="karachi">Karachi</option> <option value="lahore">Lahore</option> <option value="islamabad">Islamabad</option> </select> <p id="second"> </p> </form> </body> </html> php code is as follows <?php $arrKarachi = array("Nazimabad","Gulshan","F.BArea"); $arrIslamabad = array("Defence","kinhgt"); $arrLahore = array("Abc","Def","Ghi"); $val = $_GET["q"]; echo "$val"; switch($val){ case 'karachi': { echo "<select name = 'second'>"; $cnt = count($arrKarachi); for($i=0;$i<$cnt;$i++){ echo "<option value='".$arrKarachi[$i]."'>".$arrKarachi[$i]."</option>"; } echo "</select>"; break; } case 'lahore' : { echo "<select name='second'>"; $cnt = count($arrLahore); for($i=0;$i<$cnt;$i++){ echo "<option value='".$arrLahore[$i]."'>".$arrLahore[$i]."</option>"; } echo "</select>"; break; } case 'islamabad': { echo "<select name='second'>"; $cnt = count($arrIslamabad); for($i=0;$i<$cnt;$i++){ echo "<option value='".$arrIslamabad[$i]."'>".$arrIslamabad[$i]."</option>"; } echo "</select>"; break; } } //case ?> Link to comment https://forums.phpfreaks.com/topic/233567-code-not-showing-correct-results/ Share on other sites More sharing options...
sunfighter Posted April 13, 2011 Share Posted April 13, 2011 Could not get your ajax to work so substituted mine - I also added a first option so that onchange would work NEW HTML CODE <html> <head> <title>Drop down list usage in AJAX</title> <script type="text/javascript"> // Placed in <body> so it exicutes while page loads var httpRequest; if (window.XMLHttpRequest) { // Mozilla, Safari, ... httpRequest = new XMLHttpRequest(); if (httpRequest.overrideMimeType) { httpRequest.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { // IE try { httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } window.jaxobject = httpRequest; // makes a universal var function show_second(choice) { var httpRequest = window.jaxobject; if (!httpRequest) { alert('Giving up Cannot create an XMLHTTP instance'); return false; } /*url = "test.php?q="+choice;*/ httpRequest.onreadystatechange = function() { alertContents(httpRequest); }; httpRequest.open('GET', "test.php?q="+choice, true); httpRequest.send(''); } function alertContents(httpRequest) { if (httpRequest.readyState == 4) { if (httpRequest.status == 200) { document.getElementById('second').innerHTML = httpRequest.responseText; } else { alert('There was a problem with the request. '+ httpRequest.status); } } } </script> </head> <body> <form> <select name ="first" onchange=show_second(this.value)> <option value="">Make A Choice</option> <option value="karachi">Karachi</option> <option value="lahore">Lahore</option> <option value="islamabad">Islamabad</option> </select> <p id="second"> </p> </form> </body> </html> Link to comment https://forums.phpfreaks.com/topic/233567-code-not-showing-correct-results/#findComment-1201279 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.