Newsletter

Country State Dropdown Example With AJAX/Servlets

Ajax » on Oct 25, 2011 { 20 Comments } By Sivateja

Folks this is similar to the country/state drop down using Ajax, i believe we have lot of examples regarding this country/state drop down so just would like to do little changes, so i converted into employee number and name. But total concept is exactly same…!

Files Required

  • index.html
  • db_fetch.jsp
  • web.xml

Index.html

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
var keys=document.dummy.sele.value
var urls="https://www.java4s.com:2011/On_select_from_database_dropdown_Update_2/db_fetch.jsp?ok="+keys
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.onreadystatechange=function()
  {

removeall();

  if (xmlhttp.readyState==4)
    {
            z=0;
            var roott=xmlhttp.responseXML.documentElement;
            var ress=roott.getElementsByTagName("empname")[z].childNodes[0].nodeValue;

            while(ress!=null)
            {
                    addoptions(ress)
                    z++
             var ress=roott.getElementsByTagName("empname")[z].childNodes[0].nodeValue;
            }
    }

    function removeall()
    {

        var ct=document.dummy.sele2.length;
        for(i=ct; i>=0; i--)    {    
            document.dummy.sele2.options[i]=null;
             }
    }

    function addoptions(reslt)
    {

        var ct1=document.createElement("OPTION");
        ct1.text=reslt;
        ct1.value=reslt;
        document.dummy.sele2.options.add(ct1);

    }
}    

xmlhttp.open("GET",urls,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form name="dummy">
<font face="verdana" size="2">
Employee Number:    <select name="sele" onchange="loadXMLDoc()">
            <option>select</option>
            <option value="100">100</option>
            <option value="101">101</option>
    </select>

Employee Name:    <select name="sele2">
            <option>--choose--</option>
    </select>

</form>

</body>
</html>

db_fetch.jsp

<%@ page import="java.io.*,java.sql.*" %>
<%@ page contentType="text/html" pageEncoding="UTF-8"%>

<%
            response.setContentType("text/xml");
            String sn=request.getParameter("ok");
            int i=Integer.parseInt(sn);

                    Class.forName("oracle.jdbc.driver.OracleDriver");
                    Connection con =DriverManager.getConnection("jdbc:oracle:thin:@www.java4s.com:1521:XE","system","admin");
                    Statement st=con.createStatement();
                    ResultSet rs = st.executeQuery("select empname from emp where empno="+i);

                    out.println("<emp>");
                    while(rs.next())
                    {                            
                        out.println("<empname>"+rs.getString(1)+"</empname>");

                    }
                    out.println("</emp>");

rs.close();
st.close();
con.close();

%>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">

<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
</web-app>

OutPut

Note: you must have classes12.jar, ojdbc14.jar in the lib folder of you application

Database

Check Output

Click here to check the output

You Might Also Like

  ::. About the Author .::

Java4s_Author
- Java/J2EE Full Stack Developer
Founder of Java4s - Get It Yourself, A popular Java/J2EE Programming Blog, Love Java and UI frameworks.
You can sign-up for the Email Newsletter for your daily dose of Java tutorials.

Comments

20 Responses to “Country State Dropdown Example With AJAX/Servlets”
  1. Srinivas says:

    Hi
    For removing all options inside a select box
    instead of this
     function removeall()
        {
     
            var ct=document.dummy.sele2.length;
            for(i=ct; i>=0; i–)    {    
                document.dummy.sele2.options[i]=null;
                 }
        }

    you can use
    document.dummy.sele2.options.length=0
    this single line is enough

  2. Java4s says:

    @Srinivas

    May be you are correct, did you got exact output ?

  3. hello… i got the output but the second dropdown list is showing only one value whereas my DB(MS Access) is having multiple values…. how to get multiple values in second DDList?

  4. cherry says:

    sir, please explain in index.html line number 24 to 56 please explain

  5. koti says:

    in my database(mysql) i’ll create city,state and country tables. when i choose particular country that related state and city will show in my html dropdown list how can i do it

  6. maheswari says:

    In first dropdown i will get values.but in second dropdown empty values…request is not ging to dbfetch.jsp from firstdropdown.what is the problem please explain

  7. mdee says:

    pls can you please forward the code to my email its very important and av bin looking for this to implement in my project..PLS

  8. dileep says:

    How to use text box instead of Dropbox….
    please help me…

  9. Swathi says:

    Its working properly. I need extension of this . Means I want to display cities based on selected country and state. Can you help me out pls ..

  10. Ravi says:

    in my database(mysql) i’ll create emp name and image tables. when i choose particular name that related image will show in my html dropdown list how can i do it

  11. jugal says:

    hello,
    i am working in telecom service project and i am using mysql database.
    i have a table of city , state , zonal and branch
    and this all are the dropdown lists in the project
    if i select the state the other are automaticaly filled can i do this
    and in registration form these all the used as the foriegn keys … please give me the solution

    and tell me it is compul.. to use the ajax

  12. zoie says:

    thanks man its helpful for me

  13. shubham says:

    I have to implement this code in my project. But this code is showing some error. Sorry, but I don’t have knowledge of javascript but are the semicolons issue in the above program?

  14. hitesh mourya says:

    var urls=”https://www.java4s.com:2011/On_select_from_database_dropdown_Update_2/db_fetch.jsp?ok=”+keys
    Please explain this code.

  15. Thiga says:

    The second drop-down is empty.

  16. soma says:

    Hi Siva,

    This article/site is very good or easily understandinh formate. SO
    I want explain about hibernate interseptors with spring boot for audit logs.
    So can you please share it ASP.

  17. vibhor says:

    var ress=roott.getElementsByTagName("empname")[z].childNodes[0].nodeValue;

    Uncaught TypeError: Cannot read property 'childNodes' of undefinedxmlhttp.onreadystatechange @ (index):29

    above error is ocurring.
    Second dropdown in not displaying values. can u please help?

  18. vibhor says:

    Hi,
    I Could solve my problem. Thanks for the lovely code.

  19. ravi says:

    Can you please give the same code for ajax in jquery for simplicity it would be helpful.

Name*
Mail*
Website



By posting your answer, you agree to our comments policy.
Most Recent Posts from Top Categories
Spring Boot Hibernate Spring
Contact | About Us | Privacy Policy | Advertise With Us

© 2010 - 2018 Java4s - Get It Yourself.
The content is copyrighted to Sivateja Kandula and may not be reproduced on other websites.