Tutorials : Initializing an HTML-form using JSP and JavaScript :
Contents
Initializing an HTML-form using JSP and JavaScript
Let JavaScript do the work for you
Special characters--why do they keep bothering me?

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.

 

How to Add Java Applets to Your Site

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.