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 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.









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
DropDown and text boxes with AJAX, JSP - Ajax
DropDown and text boxes with AJAX, JSP  Hi, we are using one drop... present. we are already using jsp's and java technology. can we integrate ajax in jsp's to achieve the same? if so could you please guide me to achive the same
Advertisements
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
Ajax with jsp - Ajax
Ajax with jsp  multiple combo boxes with ajax in jsp?  Hi friend, I am sending you a link. I hope that, this link will help you. Please visit for more information. http://www.roseindia.net/jsp
ajax and jsp code - Ajax
ajax and jsp code  can u please give me the code for retriving the data from database using ajax our requriment is if i select country name in listbox display the corresponding all the states. using jsp and ajax   
dropdown
dropdown  how to hide textbox field when i deselect from select dropdown
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
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
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
Combo Box Using Ajax In JSP
Combo Box Using Ajax In JSP       In this section, we develop an  application to Select the Data from database using Ajax in combo box. We created two file
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
Popup Window using Ajax In JSP
Popup Window using Ajax In JSP  ... Window application using Ajax in JSP. For this, we will create the following...("Insert")) { %> <jsp:forward page="InsertData.jsp" />
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
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 - JSP-Servlet
Ajax  Simple ajax code for getting one text box value  Hi friend, Code to help in solving the problem : function postRequest... on Ajax visit to : http://www.roseindia.net/ajax/ Thanks
jsp and ajax - JSP-Servlet
jsp and ajax  i had some problem i want to display the current... to be automatically updated for every second for that i want to make an ajax call.../jsp/fileupload.shtml Thanks
ajax jsp - Ajax
ajax jsp  multiple combo with ajax using jsp?  Hi friend, I am sending you a link. This link will help you. Please visit for more information. http://www.roseindia.net/jsp/comboSelect.shtml Thanks
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
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
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
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
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
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
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
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
jsp dropdown - JSP-Servlet
jsp dropdown  in my table there are 3 fields named orderid ,itemname, itemqty. i want code that fetch orderid in dropdown... on select dropdown get all items list of that orderid... there are multiple items at one orderid
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 - JSP-Servlet
dropdown  i want to use dropdown select value in query-string in same page.. Using selected 'name' want to fetch details of that person from database.. without using Ajax...  Hi Friend, Try the following code
dropdown - JSP-Servlet
dropdown  i have below code for dropdown . now i want to user that textbox value in query at same page... how to get it in a new variable??? function getValue(){ var combo = document.getElementById("sel"); var val
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
Dropdown menus onchange atribute
Dropdown menus onchange atribute  Can I know how do we get the drop... 11111 mini bus 64537 help me please!!! btw. im using jsp... from database and store it into dropdown list. On selecting the value from
multiple dropdown issue
multiple dropdown issue  This is Venkat from Hyderabad,India.Working... valuable suggestions.. Technologies I used are Java, J2ee, jsp,Servlets, Javascript, Ajax. Some how Iam able to receive the data for labels, dropdowns. I
change navbar dropdown color in bootstrap
change navbar dropdown color in bootstrap  How to change the color of navbar dropdown color in a bootstrap based menu in a website? Thanks  ...-default .navbar-nav .open .dropdown-menu>li>a,.navbar-default .navbar-nav
Retrieval of Dropdown list
Retrieval of Dropdown list  Hi frnds... Am having problem... ... for eg, let A1,A2,A3,A4 be the values in dropdown.. if i click A1... dropdown.. Am not able to retrive the name for further process... Pls check
jsp dropdown - JSP-Servlet
jsp dropdown  print dropdown selected value in same page without refreshing page in jsp....   Hi Friend, Try the following code: 1)selectbox.jsp: var xmlHttp function showState(str
binding data with textbox on dropdown click
binding data with textbox on dropdown click  Hello friends,Divyesh here. i have jsp page and i would like to bind data with text box on dropdown click. in dropdown employee id are load.and when we select perticular id than how
dropdown - JSP-Servlet
dropdown  i want to use dropdown select value in query-string in same page.. Using selected 'name' want to fetch details of that person from database..  Hi Friend, Try the following code: 1)ajaxExample.jsp

Ads