Multiple form in Jsp

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>&nbsp;</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:

Download the application

Multiple form in Jsp

Multiple form in Jsp

Tutorials