JSP: Creating Dynamic Forms

Friday Mar 30th 2001 by Stephanie Kaminaris

Dynamic forms are a part of most serious web site. A typical use includes forms presented with a variable number of items ordered on a commerce site. Learn how to create your own dynamic forms using JSP.

Generating dynamic content in Web applications is important when the content must reflect the most current and available data and personalized information One of the main advantages of JavaServer Pages is the ability to generate dynamic content. JSPs generate dynamic HTML pages by using Java control structures like for loops and if statements. As a result, forms can be generated dynamically following some specified logical layout.

Dynamic Forms

You can dynamically generate HTML forms by following a layout specification that a JSP code can use to create the form. This is especially useful when forms are used to gather information as part of a collection of data or a sequence.

One possible use of dynamic forms, together with dynamic tables, is an online-shopping cart. A shopping cart lists the items a user intends to purchase and information like: individual prices, short descriptions, quantities, subtotals, and a grand total of the purchase. The shopping cart can be created by combining HTML forms and tables. The table would tabulate the items in separate rows, with the information for each item filling different columns.

The form would gather the quantities for each item, so that subtotals can be computed for each item in the shopping cart. The user can input the quantities for each item (default would be 1) and they would click on a button that would refresh the cart when a change would be made. The rows of the table would be created using a for loop, and an INPUT field (TYPE=TEXT) would be inserted in the appropriate column for each of the items.

A form's selection elements are an example of a sequence of choices. These typically consist of a long list of choices of the same data type. For instance, if the choices are consecutive years then these can be easily generated within a for loop.

The following example JSP shows how forms can be generated dynamically. The form in Figure 1 gathers typical billing information like credit card type, number, and expiration date. In real life the information would be processed by a secure server. An example is given for several FORM elements. For instance the SELECT element for the expiration date of the credit card contains ten distinct years from which to choose. Instead of hard coding each choice, a for loop is used to dynamically generate the choices.

Listing 1: dynamicForm.jsp

 1: <HTML><HEAD><TITLE>Dynamic Form</TITLE></HEAD>
 2: <BODY>
 3: <B>Form</B>
 4: <FORM ACTION=dynamicForm.jsp METHOD=POST>
 6: <%  String[] textFields = {"FirstName","LastName","Address","City","Zip"};
 7:     for(int j=0; j<textFields.length; j++){     %>
 8:     <TR>    <TD> <%=textFields[j]%>:                       </TD>
 9:             <TD> <INPUT TYPE=TEXT NAME=<%=textFields[j]%>> </TD>
10:     </TR>
11: <%  }   %>
12:     <TR>    <TD> State  </TD>
13:             <TD> <SELECT NAME=State>
14: <%  String[] states = {"AZ", "CA", "NM", "MA", "ME", "MD", "..."};
15:     for(int s=0; s<states.length; s++) {    %>
16:                     <OPTION><%=states[s]%></OPTION>
17: <%  }   %>
18:                  </SELECT></TD>
19:     </TR>
20:     <TR>    <TD> Card Number  </TD>
21:             <TD> <INPUT TYPE=TEXT NAME=cNumber></TD>
22:     </TR>
23:     <TR>    <TD> Card Type  </TD>
24:             <TD> <SELECT NAME=CardType>
25: <%  String[] cTypes = {"Amex", "Visa", "Master Card", "Discovery", "..."};
26:     for(int t=0; t<cTypes.length; t++) {    %>
27:                     <OPTION><%=cTypes[t]%></OPTION>
28: <%  }   %>
29:                  </SELECT></TD>
30:     </TR>
31:     <TR>    <TD> Expiration Date (MM/DD/YYYY) </TD>
33:             <SELECT NAME=cYear>
34:             <%  int startYear = 2000;
35:                 int endYear = 2010;
36:                 for(int y=startYear; y<endYear; y++) {    %>
37:                     <OPTION><%=y%></OPTION>
38:             <%  }   %>
39:             </SELECT></TD>
40:     </TR>
41: </TABLE>
43: </FORM>
44: <HR>
45: <B>Form Content</B><BR>
46: <TABLE>
47: <%  Enumeration parameters = request.getParameterNames();
48:     while(parameters.hasMoreElements()){
49:         String parameterName = (String)parameters.nextElement();
50:         String parameterValue = request.getParameter(parameterName); %>
51:         <TR>
52:             <TD><%=parameterName%></TD>
53:             <TD><%=parameterValue%></TD>
54:         </TR>
55: <%  }   %>
56: </BODY></HTML>

Line 4 declares the FORM and directs its request to itself. The fields of the form are laid out using the TABLE declared in line 5. Lines 6 through 11 create 5 INPUT TEXT fields. Lines 12 through 19 declare a pull down selection field for the states. Lines 20 through 22 declare a single text field for the card number.

Lines 23 through 30 declare another selection field for the card type. Lines 31 through 40 declare fields for the month, day and year of expiration. The year field is another selection field. Lines 45 on print out the content of the request generated by the form. Figure 1 shows the Web page after submitting the form.

Figure 1: The form after having submitted it


There are many ways to use JSPs to generate dynamic content. This article showed you how to dynamically generate forms.

About the Authors:

Jose Annunziato received his Master's and Doctor of Science degrees in computer science from the University of Massachusetts. Lowell. Dr. Annunziato works for BEA Systems where he develops courseware products such as WebLogic Server, WebLogic Commerce Server, and WebLogic Enterprise.

Stephanie Fesler Kaminaris has written hundreds of pages of course materials on Web development, such as HTML, JavaScript, Active Server Pages, VBScript, and CGI programming. She has also written course materials for BEA's WebLogic Server courses, such as WebLogic as a Web Server, Java Server Pages, Servlets, and Web Applications.

This article is based on techniques presented in Sams Teach Yourself JavaServer Pages in 24 Hours (0672320231) - a book by Jose Annunziato and Stephanie Fesler Kaminaris, with Sams Publishing.

© Copyright Sams Publishing, All Rights Reserved


Mobile Site | Full Site
Copyright 2017 © QuinStreet Inc. All Rights Reserved