Use of Select Box to show the data from database

This example will describe you the use of Select Box in a JSP page to show the data fetched from the database.

Use of Select Box to show the data from database

Use of Select Box to show the data from database

     

Example program using Select Box to show retrieved data from database

This example will describe you the use of Select Box in a JSP page to show the data fetched from the database. We are using Servlet to get data from the database using MySQL and we are forwarding this servlet data to the "selectbox.jsp" page using "RequestDispatcher". In this page, item selected in the select box is shown in the text box correspondingly.

In this example we are using JavaScript to show the content selected in the select box and correspondingly reflect it to the text box. We are using a function "change()" to get the values selected by user from Select Box.

<script type="text/javascript">
function change()
{
var answer = document.getElementById('selc').value;
document.getElementById('textvalue').value=answer;
}

</script>

For getting values from database we are using MySQL database and connecting to the database "messagepaging" . Table structure for "message" table is given as below :

create table `message` (
`id` double ,
`message` varchar (256)
); 
insert into `message` (`id`, `message`) values('1','amir');
insert into `message` (`id`, `message`) values('2','raghuwanshi');
insert into `message` (`id`, `message`) values('3','raghuw');
insert into `message` (`id`, `message`) values('4','suman');
insert into `message` (`id`, `message`) values('5','amit');

In DataServlet we are getting data from the "message" table and adding to a List object  to dispatch it to the JSP page's select box. Following lines of code is written to send data to JSP page by setting attribute 

request.setAttribute("data",dataList);

This request is dispatched to JSP page in following way

RequestDispatcher dispatcher = request.getRequestDispatcher(page);
if (dispatcher != null){
dispatcher.forward(request, response);

where page is defined in a string object

String page="selectbox.jsp";

Full code for Servlet File "DataServlet.java" is given as below:

1. DataServlet.java

import java.io.*;
import java.util.*;
import java.sql.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class DataServlet extends HttpServlet{

  private ServletConfig config;
  //Setting JSP page
  String page="selectbox.jsp";

  public void init(ServletConfig config)
  throws ServletException{
 this.config=config;
 }
  public void doGet(HttpServletRequest request, 
HttpServletResponse response

  throws 
ServletException, IOException {
  
  PrintWriter out = response.getWriter();
  //Establish connection to MySQL database
  String connectionURL = "jdbc:mysql://192.168.10.59/messagepaging";
  Connection connection=null;
  ResultSet rs;
  response.setContentType("text/html");
  List dataList=new ArrayList()
  try {
 // Load the database driver
  Class.forName("com.mysql.jdbc.Driver");
  // Get a Connection to the database
  connection = 
  DriverManager.getConnection
(connectionURL, "root""root")
  //Select the data from the database
  String sql = "select message from message";
  Statement s = connection.createStatement();
  s.executeQuery (sql);
  rs = s.getResultSet();
  while (rs.next ()){
  //Add records into data list
  dataList.add(rs.getString("message"));
  }
  rs.close ();
  s.close ();
  }catch(Exception e){
  System.out.println("Exception is ;"+e);
  }
  request.setAttribute("data",dataList);
  //Disptching request
  RequestDispatcher dispatcher = request.getRequestDispatcher(page);
  if (dispatcher != null){
  dispatcher.forward(request, response);
  
  }
}

JSP page "selectbox.jsp" is getting data in following way 

<% List data= (List) request.getAttribute("data");

Full code of JSP page is given as below:

2. selectbox.jsp

<%@ page language="java" import="java.util.*"%>
<html>
<head>
<script type="text/javascript">
function change()
{
var answer = document.getElementById('selc').value;
document.getElementById('textvalue').value=answer;
}
</script>
</head>
<body>
<h1>Use of Select Box in JSP</h1>
<table border="1" width="41%" height="53" cellspacing="0" cellpadding="3" 
    bgcolor="#000080" bordercolorlight="#FFFFFF">
<tr>
<td width="100%" height="18" colspan="2"><b>
<font color="#FF00FF">Select items from select box</font></b></td>
</tr>
<tr>
<td width="17%" height="23">
<select name="ActionSelect" onChange="change()" id="selc" >
<%Iterator itr;%>
<% List data= (List)request.getAttribute("data");
for (itr=data.iterator(); itr.hasNext(); )
{
String value=(String)itr.next();
%>
<option value=<%=value%>><%=value%></option>
<%}%> 
</select>
</td>
<td width="83%" height="23"><input type="text" id="textvalue" />
</td>
</tr>
</table>
</body>
</html>

For servlet to run and execute we have to do servlet entry into "web.xml

<?xml version="1.0" encoding="ISO-8859-1"?>

  <web-app>
   <display-name>Welcome to Tomcat</display-name>
   <description>Welcome to Tomcat</description>
   <servlet>
   <servlet-name>DataServlet</servlet-name>
  <servlet-class>DataServlet</servlet-class>
   </servlet>
   <servlet-mapping>
  <servlet-name>DataServlet</servlet-name>
  <url-pattern>/DataServlet</url-pattern>
   </servlet-mapping>
   </web-app>

Steps required to run this example:

  • Create database and table "message"
  • Create and Save "DataServlet"
  • Compile and place this class file into Web-Inf/classes folder
  • Do entry of servlet into web.xml
  • Create and Save JSP file selectbox.jsp
  • Start and deploy Tomcat Server and type the following URL in address bar
    http://localhost:8080/Jspexample/DataServlet

Output:

First value selected by default is  data list's first item.

When we select any other item from select box then it will reflect to the text box as well.

value "raghuwanshi" selected and then it is reflected in text box

Download Source Code