index.jsp page
Wednesday, December 29, 2010
<%--
@author Jagadeesh
* if you like this example please submit your comments and suggestions
* if you like this example please submit your comments and suggestions
* if you have any doubts you can post comments in blog comment form
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<script>
function GetXmlHttpObject()
{
//creating xmlhttprequestobject.common method for any ajax application
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
//to get states
function getStates(country)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
else
{
//sending selected country to servlet
var url="GetStates?action=getStates&country="+country;
//creating callback method.here countrychanged is callback method
xmlHttp.onreadystatechange=countryChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
}
//call back fuction
function countryChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
//getting response from server(Servlet)
var showstates = xmlHttp.responseText;
//displaying response in select box by using that id
document.getElementById("state").innerHTML=showstates;
//to get district for selected state getting selectedstate
// from selectbox using that selectboxid
var state = document.getElementById("state").value;
// to get the districts for selected state
getDistricts(state);
}
}
// to get districts
function getDistricts(state)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
else
{
//above we got selected state for selected country
//now we are getting districts for selected state
var url="GetStates?action=getDistricts&state="+state;
//creating callback method.here stateChanged is callback method
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
//getting response from server(Servlet) of available districts
var showdistricts = xmlHttp.responseText;
//displaying district in selectbox
document.getElementById("districts").innerHTML=showdistricts;
}
}
</script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<form method="post" name="register" id="register">
<SELECT NAME="country" id="country"onchange="getStates(this.value)">
<OPTION VALUE="select">select
<OPTION VALUE="india">India
<OPTION VALUE="US">US
<OPTION VALUE="UK">UK
</SELECT>
<!-- empty select box to display states-->
<SELECT NAME="states" id="state"style="width:100px"
onchange="getDistricts(this.value)">
</SELECT>
<!-- empty select box to display districts-->
<SELECT NAME="districts" id="districts"style="width:100px" >
</SELECT>
</form>
</body>
</html>
Labels: