- Dynamic Titles
- Dynamic Tables
- Dynamic Forms
- A Configurable Home Page
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Dynamic Forms
You can also 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 that a user intends to purchase and information such as 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 would click on a button that would refresh the cart when a change was 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 in Listing 3 shows how forms can be generated dynamically. The form in Figure 3 gathers typical billing information such as 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 10 distinct years from which to choose. Instead of hard-coding each choice, a for loop is used to dynamically generate the choices.
Listing 3 dynamicForm.jsp
1: @lt;HTML@gt;@lt;HEAD@gt;@lt;TITLE@gt;Dynamic Form@lt;/TITLE@gt;@lt;/HEAD@gt;
2: @lt;BODY@gt;
3: @lt;B@gt;Form@lt;/B@gt;
4: @lt;FORM ACTION=dynamicForm.jsp METHOD=POST@gt;
5: @lt;TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0@gt;
6: @lt;% String[] textFields = {"FirstName","LastName","Address","City","Zip"};
7: for(int j=0; j@lt;textFields.length; j++){ %@gt;
8: @lt;TR@gt; @lt;TD@gt; @lt;%=textFields[j]%@gt;: @lt;/TD@gt;
9: @lt;TD@gt; @lt;INPUT TYPE=TEXT NAME=@lt;%=textFields[j]%@gt;@gt; @lt;/TD@gt;
10: @lt;/TR@gt;
11: @lt;% } %@gt;
12: @lt;TR@gt; @lt;TD@gt; State @lt;/TD@gt;
13: @lt;TD@gt; @lt;SELECT NAME=State@gt;
14: @lt;% String[] states = {"AZ", "CA", "NM", "MA", "ME", "MD", "..."};
15: for(int s=0; s@lt;states.length; s++) { %@gt;
16: @lt;OPTION@gt;@lt;%=states[s]%@gt;@lt;/OPTION@gt;
17: @lt;% } %@gt;
18: @lt;/SELECT@gt;@lt;/TD@gt;
19: @lt;/TR@gt;
20: @lt;TR@gt; @lt;TD@gt; Card Number @lt;/TD@gt;
21: @lt;TD@gt; @lt;INPUT TYPE=TEXT NAME=cNumber@gt;@lt;/TD@gt;
22: @lt;/TR@gt;
23: @lt;TR@gt; @lt;TD@gt; Card Type @lt;/TD@gt;
24: @lt;TD@gt; @lt;SELECT NAME=CardType@gt;
25: @lt;% String[] cTypes = {"Amex", "Visa", "Master Card", "Discovery", "..."};
26: for(int t=0; t@lt;cTypes.length; t++) { %@gt;
27: @lt;OPTION@gt;@lt;%=cTypes[t]%@gt;@lt;/OPTION@gt;
28: @lt;% } %@gt;
29: @lt;/SELECT@gt;@lt;/TD@gt;
30: @lt;/TR@gt;
31: @lt;TR@gt; @lt;TD@gt; Expiration Date (MM/DD/YYYY) @lt;/TD@gt;
32: @lt;TD@gt; @lt;INPUT TYPE=TEXT NAME=cMonth SIZE=2@gt;@lt;INPUT TYPE=TEXT NAME=cDay SIZE=2@gt;
33: @lt;SELECT NAME=cYear@gt;
34: @lt;% int startYear = 2000;
35: int endYear = 2010;
36: for(int y=startYear; y@lt;endYear; y++) { %@gt;
37: @lt;OPTION@gt;@lt;%=y%@gt;@lt;/OPTION@gt;
38: @lt;% } %@gt;
39: @lt;/SELECT@gt;@lt;/TD@gt;
40: @lt;/TR@gt;
41: @lt;/TABLE@gt;
42: @lt;INPUT TYPE=SUBMIT VALUE=Submit@gt;
43: @lt;/FORM@gt;
44: @lt;HR@gt;
45: @lt;B@gt;Form Content@lt;/B@gt;@lt;BR@gt;
46: @lt;TABLE@gt;
47: @lt;% Enumeration parameters = request.getParameterNames();
48: while(parameters.hasMoreElements()){
49: String parameterName = (String)parameters.nextElement();
50: String parameterValue = request.getParameter(parameterName); %@gt;
51: @lt;TR@gt;
52: @lt;TD@gt;@lt;%=parameterName%@gt;@lt;/TD@gt;
53: @lt;TD@gt;@lt;%=parameterValue%@gt;@lt;/TD@gt;
54: @lt;/TR@gt;
55: @lt;% } %@gt;
56: @lt;/BODY@gt;@lt;/HTML@gt;
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 3 shows the Web page after submitting the form.
){kind=link}
The form after having submitted it.