Initializing an HTML-form using JSP and JavaScript
by Keld H. Hansen
If you're building web-applications a quite common task will be to
handle HTML-forms with "controls" like input fields and check boxes.
Sometimes the forms are "empty", with no data in the input fields and
no boxes checked , but often you'll have to initialize the forms
with some data. The data may have been read from a database and should
now be presented to the user, or the data could have been entered
previously by the user and should now be redisplayed,
maybe because some errors have to be corrected.
In this article I will present a safe technique for initializing
the controls in a form. It is general and simple to use, and it
will give you a reliable application.
First, let's look at the most common controls that are used in forms.
The column "Value" shows the data that is being sent to the
server when the user submits a form.
|
Type |
Used for |
HTML tag |
Value |
|
Text |
Entering a single line of text |
<input type=text ...> |
The text itself |
|
Text area |
Entering several lines of text |
<textarea ...>
</textarea> |
|
Radio button |
Selecting one among several choices |
<input type=radio ...> |
One (or more), typically short, names assigned (through HTML) to
the selected items |
|
Check box |
Selecting one or more among several choices |
<input type=checkbox ...> |
|
Selection list |
Selecting one or more among (often many) choices |
<select ...>
<option ...>
</option>
|
It's very simple to make a static initialization of the
controls in the HTML, but the way you do it varies a lot:
|
Type |
HTML |
|
Text |
<input type=text value="John Doe"> |
|
Text area |
<textarea>
Bill Gates
Microsoft
</textarea >
|
|
Radio button |
<input type=radio value="IBM" checked>International Business
Machines |
|
Check box |
<input type=checkbox value="SUN" checked>Sun |
|
Selection list |
<select ...>
<option value="VW" selected>Volkswagen
|
When a page with these controls loads, you will see the text
"John Doe" in the text field, "Bill Gates -- new line
-- Microsoft" in the text area, "International
Business Machines" having its radio button pushed,
"Sun" being checked, and the "Volkswagen" being
highlighted. Except for the text area they all use the value-parameter
for initialization. Rather simple stuff. But it gets more complicated
when the values are not static, but are taken from a database or
from other sources.
Is the most common approach sufficient?
Before I show you the technique that I'll recommend, let's look at
the most common--but not the best--way to code it. If you are coding
JSP, and have the actual value for a text control in the String
variable "myValue", you very often see examples coded
like this:
<input type=text value="<%=myValue%>">
On first sight this seems to work fine, until you enter the page
with a double quote somewhere in the value of "myValue".
When displayed you suddenly lose the part of your data that follows
the quote. If you try the same setup for a text area:
<textarea><%=myValue%></textarea>
then you don't have any problems with quotes. But if
"myValue" contains newline characters, they seem to
disappear (because newlines as well as tabs and "extra spaces"
are not rendered by the browsers). These problems are not specific to
JSP, they are the same for Microsoft's ASP
and similar languages.
The "select-one-or-many" controls (radio buttons, check
boxes and selection lists) can all be initialized directly from JSP
code, but not very elegantly. A single yes/no check box is
no problem:
<% String checked = (myBox.equals("")) ? "" : "checked"; %>
<input type=checkbox name=mybox value="add" <%=checked%>>
Add me to your mailing list
When it comes to one or more selections among many, you'll have to
work harder. As an example take a selection list where the user can
only select a single item. This time we need a loop
construct--something like this:
<select name=sel>
<%
for (int i = 0; i < sel.length; i++) {
String selected =
(sel[i].equals(mySelection)) ? "selected" : ""; %>
<option value="<%=sel[i]%>" <%=selected%>>. . .
<% } %>
</select>
If more than one item can be selected you'll have to add yet another
loop to your code. If you have a form with many controls, then you
can easily see that you will end up having a lot of JSP code mixed
with your HTML. As a general rule you should try to minimize your
JSP code inside your HTML sections, since it tends to make your
pages hard to read and maintain.
New on the Java Boutique:
New Review:
Time Management Made Easy with the Quartz Enterprise Job Scheduler
Why not just use the Java timer API? This open source scheduling
API boasts simplicity, ease-of-integration, a well-rounded feature
set, and it's free!
New Applet:
Reverse Complement
Reverse Complement is a simple applet that converts DNA or RNA
sequences into three useful formats.
Elsewhere on internet.com:
WebDeveloper Java
Lots of Java information on webdeveloper.com
WDVL Java
Thorough Java resource at the Web Developer's Virtual Library.
ScriptSearch Java
Hundreds of free Java code files to download.
jGuru: Your View of the Java Universe
Customizable portal with online training, FAQs, regular news updates, and tutorials.
| 
