Country State Dropdown Example With AJAX/Servlets
|
Ajax »
On Oct 25, 2011 | { 2 Comments }
|
Tweet
|
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="http://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 hear to check the output
|
What you are thinkig....
2 Responses to “Country State Dropdown Example With AJAX/Servlets”
If you want a pic to show with your comment, go get a gravatar !
Please post your questions on Java4s Answers forum
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 ?