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

Related Tags for Combo Box Using Ajax In JSP:
c, database, ajax, web, com, jsp, file, browser, data, select, application, io, user, get, page, vi, name, using, this, id, app, create, tab, row, js, rows, box, to, wse, base, avi, run, ws, auto, e, il, it, ax, fill, section, li, use, dev, from, browse, in, combo, as, m, having, ca, j, es, em, ase, age, me, pp, cat, when, s, sp, created, ee, esp, at, is, ha, ll, mpl, develop, ea, and, vin, tw, s, s, th, av, .js, ab, ati, ap, ica, ica, pl, nd, on, omb, om, o

«Previous Index Next»