DropDown in ajax+jsp

Ads
 

DropDown in ajax+jsp

I have four dropdown if i select first dd then only corresponding values must be there in 2nd dd,same with 3 and 4 and onchangfe it would not refresh the whole page.

View Answers

January 12, 2011 at 11:50 AM

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`)                                
        )

Thanks


January 13, 2011 at 10:48 AM

Thanks a lot for answer.It helped me a lot and its working.


January 13, 2011 at 5:03 PM

Can U provide the same code in form and table format. country city

state location


January 14, 2011 at 4:11 PM

Hi Friend,

Do changes in 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>  
      <table border="1">
      <tr><th>Country</th><th>State</th><th>City</th></tr>
      <tr><td>
      <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> 
      </td>
      <td id='state'><select name='state' >  
      <option value='-1'></option>  
      </select>
      </td>
       <td id='city'> <select name='city' >  
      <option value='-1'></option>  
      </select>   
      </td>
      </tr>
      </table>
      </body> 
      </html>

Thanks


January 15, 2011 at 12:13 PM

Thanks for the help.It is working and satisfied my requirement.


February 15, 2011 at 3:40 PM

can you send me code for same problem using DWR..


March 13, 2013 at 12:01 AM

thanx for he code


October 31, 2011 at 11:11 AM

hai friends by using above code,i could display data dynamically in drop down list...

so far fine..

But problem is when i use to send those values to servlet,the values getting null..

Please provide solution


January 19, 2012 at 3:58 PM

Yuvan Karthik say's:

           No worry frnd.. I think it's act as an Object There.. Better you can convert it as String Using "toString()" Function..

March 24, 2012 at 9:59 PM

Hi Sir!Can you please help me to write the code to display a table from the database based on the value selected from the combo box.I tried a lot.but its not working.pls Help!! :(


March 30, 2012 at 8:49 AM

can you provide code for the same code above, but it will add one option the has the value of "View All" then it will display all the content of all tables.

THANKS


April 15, 2012 at 2:09 PM

how to create for four.... and how to get id in related text box also......please reply soon


May 2, 2012 at 5:41 AM

sir. i have a problem in sending the values selected(i.e country, state, and city) to another JSP page... plz help me out... i Used the same code as provided above.. finding it difficult to get the parameters in another jsp page..!! urgent!!


July 26, 2013 at 12:44 PM

check drop down name in all pages! it should be as it is with respect to country.jsp page.


November 25, 2014 at 8:43 AM

I have created country, state and city jsp files. How to proceed next?


February 9, 2015 at 4:42 AM

frnd can u provide the same code for two text boxes that is if i selected the first text box then corresponding value should be displayed in the next text box.


April 18, 2017 at 10:50 AM

hello i am using dropdown in ajax jsp code with a submit button to show result according to the value selected in last dropdown . but it isn't working.

the value of variable in the last dropdown is not what we selected .instead of that its value remains the common id no , which we used to connect the to tables, for ex countryid in table country and state.

Ads









Related Tutorials/Questions & Answers:
DropDown in ajax+jsp
DropDown in ajax+jsp  I have four dropdown if i select first dd then only corresponding values must be there in 2nd dd,same with 3 and 4... dropdown. You can create the fourth one similarly. For the above code, we have
How to use ajax in jsp?
How to use ajax in jsp?  Hi, How i can access the server-side data in JSP using the Ajax? Thanks   Hi, You can use the Ajax code to access the server side data from JSP page. Check the tutorial Combo Box Using Ajax
Advertisements
dropdown
dropdown  how to hide textbox field when i deselect from select dropdown
The AJAX JSP Tag Library
The AJAX JSP Tag Library       The AJAX JSP Tag Library is a set of JSP tags that simplify the use of Asynchronous JavaScript and XML (AJAX) technology in JavaServer Pages. This tag
dropdown
dropdown  I have a dropdown having 2 options-"Open"& "closed".When i select "open" option the related rows of data are retrieved from database and same with the other option.My database is Mysql and coding in PHP
Multiple select dropdown with Ajax
Multiple select dropdown with Ajax This tutorial explains how to create multiple select  dropdown with Ajax  in JSP and Servlet . This example... database if not exists `multipleselect_dropdown`; USE `multipleselect
ajax in jsp
ajax in jsp  i m not able to compare string with the responseText value, though the value in the responsetext is of string type. my code: login.jsp <html> <head> <meta http-equiv
ajax in jsp
ajax in jsp  i m not able to compare string with the responseText value, though the value in the responsetext is of string type. login.jsp: print("<html> <head> <meta http-equiv="Content-Type" content="text
using ajax and jsp (struts) to login and remain on same page.
using ajax and jsp (struts) to login and remain on same page.  I am a fresher... I can forward my login page to success page using struts, but I.../struts/struts2/struts2ajax/ajax-login-form.shtml
Selection With Ajax and JSP
Selection With Ajax and JSP  I am working at a jsp page using ajax for country , state, city selection. so if he select country it will populate... the city. I am doing it through two jsp pages only. Country1.jsp : <%@ page
dropdown box
dropdown box  i need to have country,state and city in drop down box using ajax and use db2 database   Have a look at the following link: JSP dependent dropdown
Ajax Dropdown
Ajax Dropdown  hi I have One Dropdown that contains 2 options assume A and B,if i select A option then samepage one more Dropdown is their it should display values in german language using DWRUtil Parameter values in ajax. Only
dropdown cacheing
dropdown cacheing   I need code to create cache for load drop down list from db in struts1 example
DropDown Menu
DropDown Menu  Hello, i have a program that can view,add,delete... me draw to your my mind my program.. in my homepage which i have a dropdown... is the problem.. for example; if i select page 1 in my dropdown menu, and click
DropDown list
DropDown list  how to get mysql database values into dropdown usign java servlet and ajax?   Here is a jsp code that displays the database values into dropdown list. 1)country.jsp: <%@page import="java.sql.*"%>
Dependant Dropdown Lists
Dependant Dropdown Lists  Hello, I'm trying to create 2 dropdown lists. When the visitor chooses one option from the 1st list it will automatically update the 2nd dropdown. Ive already found some code which i edited but still
html dropdown not working firefox
html dropdown not working firefox  I am writing a Dropdown code in HTML which is not working in firefox. What could be the reason as it's perfectly working in IE and Crome. Thanks
creating dropdown lists in jsp
creating dropdown lists in jsp  i want to create two dropdown list which are dependent that is the first box choice have to evaluate the second boxs options
dropdown list in jsp
dropdown list in jsp  hai, i have static dropdown list.. i want to get the selected value in string variable without jsp regards asha
populate dropdown box
populate dropdown box  hi, Is there any ways in which i can populate my dropdown menu with values from 1 to n (n = the value stored in database)using java script or jsp, either is fine? Ex: If value corresponding to selected
ajax+dropdown+table format
ajax+dropdown+table format  HI, i am looking for an ajax application which must contain two dropdown list.In first dropdown if i select a manager name from the first dropdown all the reporties under the selected manager should
fetch values in dropdown
fetch values in dropdown  in my application i want fetch dropdown values in jsp page through servlet. means i have to fetch the database fields values in array variable of servlet and then i have to print those values in dropdown
parent and child dropdown
parent and child dropdown  Hi, I have one scenario in spring,i need to populate child drop down,based on parent dropdown using spring mvc and ajax... know how to use it in child drop down.How to set that child dropdown in success
struts dropdown list
struts dropdown list   In strtus how to set the dropdown list values from database ? I have a ArrayList object and set this object in dropdown jsp page using struts ? please send me jsp code... sample code: **Action
inserting dropdown values into database table
inserting dropdown values into database table   hi i want to insert dropdown values into a database table by using jsp
checkbox with dropdown listbox in jsp
checkbox with dropdown listbox in jsp  i loaded the the data into the drop down listbox in jsp from access database.now i have to add a check box,if it checked means dropdownlist box carryout the data's,else it should
dropdown list in jsf
dropdown list in jsf  I want to add a list box to display the country name from the lists on all countries.When I select for e.g India then in the second list box it will display the states related to India only and the flow
Label n Dropdown Issue
Label n Dropdown Issue  Hi guys, Some how Iam able to receive the data for labels, dropdowns. I created one array with the size of label... with corresponding labels... the last dropdown is overriding the previous one... below
Dropdown and label issue
Dropdown and label issue  This is Venkat from Hyderabad,India.Working... suggestions.. Technologies I used are Java, J2ee, jsp,Servlets, Javascript, Ajax. Some how Iam able to receive the data for labels, dropdowns. I created one
dropdown in struts - Struts
dropdown in struts  how to populate a drop down from database entries in struts application when i have the workflow as jsp->acton->Business Delegator->controller->Business object->DAO->database. Where should i
Select DropDown Default
Select DropDown Default  Hi there, i have a program in JSP where i... of the record, in my jsp page i have a one dropdown menu where the user can choose, i.e if the user select PAGE 1 in the dropdown menu, it will display all

Ads