| 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 .:: | ||
 | ||
Comments
20 Responses to “Country State Dropdown Example With AJAX/Servlets”
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
@Srinivas
May be you are correct, did you got exact output ?
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?
sir, please explain in index.html line number 24 to 56 please explain
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
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
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
How to use text box instead of Dropbox….
please help me…
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 ..
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
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
thanks man its helpful for me
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?
var urls=”https://www.java4s.com:2011/On_select_from_database_dropdown_Update_2/db_fetch.jsp?ok=”+keys
Please explain this code.
The second drop-down is empty.
yes, for me also its showing error in jsp. near 7th line
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.
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?
Hi,
I Could solve my problem. Thanks for the lovely code.
Can you please give the same code for ajax in jquery for simplicity it would be helpful.