Thursday, 11 April 2013

AJAX- COUNTRY,STATE,CITY

By Tech Zone 4 IT at 13:56    3 comments
AJAX- COUNTRY,STATE,CITY

Hi Friend,
Try the following code:
1)country.jsp:
 <%@page import="java.sql.*"%>

 <html>
      <head>  
      <script language="javascript" type="text/javascript">  

      var xmlHttp  
      var xmlHttp
      function showState(str){

      if (typeof XMLHttpRequest != "undefined"){

      xmlHttp= new XMLHttpRequest();

      }
      else if (window.ActiveXObject){

      xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");

      }
      if (xmlHttp==null){

      alert("Browser does not support XMLHTTP Request")

      return;
      } 

      var url="state.jsp";

      url +="?count=" +str;

      xmlHttp.onreadystatechange = stateChange;

      xmlHttp.open("GET", url, true);

      xmlHttp.send(null);

      }

      function stateChange(){   

      if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){   

      document.getElementById("state").innerHTML=xmlHttp.responseText   

      }   
      }

      function showCity(str){

      if (typeof XMLHttpRequest != "undefined"){

        xmlHttp= new XMLHttpRequest();

        }
      else if (window.ActiveXObject){

        xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");

        }
      if (xmlHttp==null){

      alert("Browser does not support XMLHTTP Request")

      return;
      } 

      var url="city.jsp";

      url +="?count=" +str;

      xmlHttp.onreadystatechange = stateChange1;

      xmlHttp.open("GET", url, true);

      xmlHttp.send(null);

      }
      function stateChange1(){   

      if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){   

      document.getElementById("city").innerHTML=xmlHttp.responseText   

      }   
      }
      </script>  

      </head>  
      <body>  
      <select name='country' onchange="showState(this.value)">  

       <option value="none">Select</option>  

    <%
 Class.forName("com.mysql.jdbc.Driver").newInstance();  

 Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","root");  

 Statement stmt = con.createStatement();  

 ResultSet rs = stmt.executeQuery("Select * from country");

 while(rs.next()){

     %>
      <option value="<%=rs.getString(1)%>"><%=rs.getString(2)%></option>  

      <%
 }
     %>
      </select>  

      <br>  
      <div id='state'>  

      <select name='state' >  

      <option value='-1'></option>  

      </select>  
      </div>  

      <div id='city'>  

      <select name='city' >  

      <option value='-1'></option>  

      </select>  
      </div>
      </body> 

      </html>

January 12, 2011 at 11:54 AM

continue..
2)state.jsp:
<%@page import="java.sql.*"%>

<%
String country=request.getParameter("count");  

 String buffer="<select name='state' onchange='showCity(this.value);'><option value='-1'>Select</option>";  

 try{
 Class.forName("com.mysql.jdbc.Driver").newInstance();  

 Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","root");  

 Statement stmt = con.createStatement();  

 ResultSet rs = stmt.executeQuery("Select * from state where countryid='"+country+"' ");  

   while(rs.next()){

   buffer=buffer+"<option value='"+rs.getString(1)+"'>"+rs.getString(3)+"</option>";  

   }  
 buffer=buffer+"</select>";  

 response.getWriter().println(buffer); 

 }
 catch(Exception e){

     System.out.println(e);

 }

 %>
3)city.jsp:
<%@page import="java.sql.*"%>

<%
String state=request.getParameter("count");  

 String buffer="<select name='city'><option value='-1'>Select</option>";  

 try{
 Class.forName("com.mysql.jdbc.Driver").newInstance();  

 Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","root");  

 Statement stmt = con.createStatement();  

 ResultSet rs = stmt.executeQuery("Select * from city where stateid='"+state+"' ");  

   while(rs.next()){

   buffer=buffer+"<option value='"+rs.getString(2)+"'>"+rs.getString(3)+"</option>";  

   }  
 buffer=buffer+"</select>";  

 response.getWriter().println(buffer); 

 }
 catch(Exception e){

     System.out.println(e);

 }
 %>
We have created 3 dependent dropdown. You can create the fourth one similarly.
For the above code, we have used 3 database tables:
1)country
CREATE TABLE `country` (                                 

           `countryid` bigint(255) NOT NULL auto_increment,       

           `countryname` varchar(255) default NULL,               

           PRIMARY KEY  (`countryid`)                             

     )
2)state
CREATE TABLE `state` (                                   

          `stateid` bigint(255) NOT NULL auto_increment,         

          `countryid` int(255) default NULL,                     

          `state` varchar(255) default NULL,                     

          PRIMARY KEY  (`stateid`)                               

        )
3)city
CREATE TABLE `city` (                                    

          `cityid` bigint(255) NOT NULL auto_increment,          

          `stateid` int(255) default NULL,                       

          `city` varchar(255) default NULL,                      

          PRIMARY KEY  (`cityid`)                                

        )

3 comments:

  1. MODESTO21 January 2014 at 21:28

    the problem is when i use to send those values to servlet,the values getting null..
    help me please

    ReplyDelete
  2. Unknown16 December 2015 at 05:03

    Nice example......really helpful...:)

    ReplyDelete