rendered paste body<html> <head> <title>Get states</title> </head> <body> <form name="form1" action="submit.php" method='POST'> <select name="country" onchange="window.getStates()"> <option disabled="1">Select Country</option> <option value="pakistan">Pakistan</option> <option value="india">India</option> <option value="usa">USA</option> <option value="uk">UK</option> </select> <input type="submit" name="submit" value="submit"> </form> <script type="text/javascript"> function getStates() { var xmlhttp; try { xmlhttp = new XMLHttpRequest; }catch(e) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } if(xmlhttp) { var form = document['form1']; var country = form['country'].value; xmlhttp.open("GET", "http://localhost/yt/getStates.php?country="+country, true); xmlhttp.onreadystatechange = function () { if(xmlhttp.readyState == 4) { var d = document.createElement("span"); var o = null; d.innerHTML = "<select name='state'>"+xmlhttp.responseText+"</select>"; d.id ="loaded_states"; if (o = document.getElementById("loaded_states")) { o.parentNode.replaceChild(d, o); }else form.insertBefore(d, form['submit']); } } xmlhttp.send(null); } } </script> </body></html>