Multiple form in Jsp

In this section, we have developed an Multiple form application . We created two file userform.jsp and UserForm.java.

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