index.jsp page

Wednesday, December 29, 2010 Posted by Jagadeesh Manne
<%--
   @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:

Post a Comment