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
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
