Multiple form in Jsp
In this section, we have developed an Multiple form application . We created two file userform.jsp and UserForm.java.
Brief description of the flow of the application:
- User opens userform.jsp in the browser having four forms with its corresponding buttons.
- Clicks on particular form button it calls the Servlet "UserForm.java" and inserts the record into database.
- Clicked button is disabled and all remaining buttons will be enabled.
Step 1: Create a web page ("userform.jsp") to
create the multiple form.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
function disableBttn(val){
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null) {
alert ("Browser does not support HTTP Request")
return
}
var username= document.forms[val-1].username.value;
var fname= document.forms[val-1].fname.value;
var email= document.forms[val-1].email.value;
var url="http://localhost:8080/userform/userForm";
url=url+"?username="+username+"&fname="+fname+"&email="+email+"&val="+val;
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged() {
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
var showdata = xmlHttp.responseText;
var val = parseInt(showdata.toString());
for(var i=1;i<=8;i++) {
if(i==val){
// To Disable the Button
document.forms[i-1].button.disabled=true;
}
else {
document.forms[i-1].username.value="";
document.forms[i-1].fname.value="";
document.forms[i-1].email.value=""; // To Enable the Button
document.forms[i-1].button.disabled=false;
}
}
}
}
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>
<br><br>
<center>
<table bgcolor="#efefef">
<tr><td colspan=3 align="center"><b>Multiple Form In Jsp</b></td></tr>
<tr><td colspan=3 align="center"><b> </b></td></tr>
<tr>
<td>
<%
for(int i=1;i<=2;i++)
{
%>
<form name="f<%=i%>">
<fieldset style="width:250px;">
<legend><b>#Form<%=i%></b></legend>
<table width="250px" border=0 align="center">
<tr><td>Username</td><td><input type="text" name="username"></td></tr>
<tr><td>Name</td><td><input type="text" name="fname"></td></tr>
<tr><td>Email</td><td><input type="text" name="email"></td></tr>
<tr>
<td colspan=2 align="center">
<input type="button" name="button" value="Button<%=i%>" onclick=
"disableBttn(<%=i%>);">
</td>
</tr>
</table>
</fieldset>
</form>
<%
}
%>
</td><td>
<%
for(int i=3;i<=4;i++)
{
%>
<form name="f<%=i%>">
<fieldset style="width:250px;">
<legend><b>#Form<%=i%></b></legend>
<table width="250px" border=0 align="center">
<tr><td>Username</td><td><input type="text" name="username"></td></tr>
<tr><td>Name</td><td><input type="text" name="fname"></td></tr>
<tr><td>Email</td><td><input type="text" name="email"></td></tr>
<tr>
<td colspan=2 align="center">
<input type="button" name="button" value="Button<%=i%>"
onclick="disableBttn(<%=i%>);">
</td>
</tr>
</table>
</fieldset>
</form>
<%
}
%>
</td>
</tr>
</table>
</center>
</BODY>
</HTML>
Step:2Create a Servlet ("UserForm.java") to insert the data.
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.sql.*;
import java.sql.*;
public class UserForm extends HttpServlet{
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException,IOException{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
System.out.println("MySQL Connect Example.");
Connection conn = null;
String url = "jdbc:mysql://localhost:3306/";
String dbName = "userdetails";
String driver = "com.mysql.jdbc.Driver";
String userName = "root";
String password = "root";
String uname = request.getParameter("username");
String fname = request.getParameter("fname");
String email = request.getParameter("email");
String val = request.getParameter("val");
Statement st;
try {
Class.forName(driver).newInstance();
conn = DriverManager.getConnection(url+dbName,userName,password);
//out.println("Connected to the database");
String query= "insert into userform set username='"+uname+"',fname='
"+fname+"',email='"+email+"'";
System.out.println("query " + query);
//out.println("<br>");
st = conn.createStatement();
int i = st.executeUpdate(query);
if(i>0)
{
out.println(val);
}
conn.close();
System.out.println("Disconnected from database");
} catch (Exception e) {
e.printStackTrace();
}
}
}
Step 3:
"web.xml" to mapping the Servlet ("UserForm.java")
| <?xml version="1.0" encoding="ISO-8859-1"?> <web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"> <display-name>Welcome to Tomcat</display-name> <description> Welcome to Tomcat </description> <servlet> <servlet-name>userform</servlet-name> <servlet-class>UserForm</servlet-class> </servlet> <servlet-mapping> <servlet-name>userform</servlet-name> <url-pattern>/userForm</url-pattern> </servlet-mapping> </web-app> |
Output of this Program:
