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 combo.jsp
and getuser.jsp. When a web page ("combo.jsp") run on browser then it will
having a Select Box Employee Id.On select emp id data come
from database corresponding this id and auto fill the Emp Id and Employee
Name.
Step 1: Create a web page(combo.jsp) to show a form.
<%@ page import="java.sql.*" %>
<html>
<head>
<style>
A:hover {text-decoration: none;
border: 0px;
font-size:14pt;
color: #2d2b2b; }
</style>
<link rel="stylesheet" type="text/css" href="datepicker.css"/>
<script type="text/javascript">
function showEmp(emp_value)
{
if(document.getElementById("emp_id").value!="-1")
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getuser.jsp"
url=url+"?emp_id="+emp_value
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
else
{
alert("Please Select Employee Id");
}
}
function stateChanged()
{
document.getElementById("ename").value ="";
document.getElementById("emp_id").value ="";
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
var showdata = xmlHttp.responseText;
var strar = showdata.split(":");
if(strar.length==1)
{
document.getElementById("emp_id").focus();
alert("Please Select Employee Id");
document.getElementById("ename").value =" ";
document.getElementById("emp_id").value =" ";
}
else if(strar.length>1)
{
var strname = strar[1];
document.getElementById("emp_id").value= strar[2];
document.getElementById("ename").value= strar[1];
}
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
</script>
</head>
<body>
<form name="employee">
<br><br>
<table border="0" width="400px" align="center" bgcolor="#CDFFFF">
<div id="mydiv"></div>
<tr><td><b>Select Employee Id</b></td><td>
<select name="semp_id" onchange="showEmp(this.value);">
<option value="-1">Select</option>
<%
Connection conn = null;
String url = "jdbc:mysql://localhost:3306/";
String dbName = "user_register";
String driver = "com.mysql.jdbc.Driver";
String userName = "root";
String password = "root";
int sumcount=0;
Statement st;
try {
Class.forName(driver).newInstance();
conn = DriverManager.getConnection(url+dbName,userName,password);
String query = "select * from employee_details";
st = conn.createStatement();
ResultSet rs = st.executeQuery(query);
%>
<%
while(rs.next())
{
%>
<option value="<%=rs.getString(1)%>"><%=rs.getString(1)%></option>
<%
}
%>
<%
}
catch (Exception e) {
e.printStackTrace();
}
%>
</select>
</td></tr>
<tr><td ><b>Employee Id:</b></td><td>
<input type="text" name="emp_id" id="emp_id" value=""></td></tr>
<tr><td><b>Employee Name:</b></td><td>
<input type="text" name="emp_name" id="ename" value=""></td></tr>
</table>
</form>
<table border="0" width="100%" align="center">
<br>
<br>
</table>
</body>
</html>
Step:2Create a web page (getuser.jsp) to retireve the data from database.
<%@ page import="java.sql.*" %>
<%
String emp_id = request.getParameter("emp_id").toString();
String data ="";
Connection conn = null;
String url = "jdbc:mysql://localhost:3306/";
String dbName = "user_register";
String driver = "com.mysql.jdbc.Driver";
String userName = "root";
String password = "root";
int sumcount=0;
Statement st;
try {
Class.forName(driver).newInstance();
conn = DriverManager.getConnection(url+dbName,userName,password);
String query = "select * from employee_details where eid='"+emp_id+"'";
st = conn.createStatement();
ResultSet rs = st.executeQuery(query);
while(rs.next())
{
data = ":" + rs.getString(2) + " " + rs.getString(3) +":"+ emp_id;
}
out.println(data);
}
catch (Exception e) {
e.printStackTrace();
}
%>
Successful Output of the program:
Download the full web application shows here.
Download the application