Home Jsp Multiple form in Jsp

Related Tutorials


 
 

Share on Google+Share on Google+

Multiple form in Jsp

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

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

Advertisements

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: August 6, 2008

Related Tutorials

Discuss: Multiple form in Jsp  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0
DMCA.com