Handling textareas By Line

In general, you cannot deal with specific lines of textarea content. The following function overcomes this deficiency by assigning the text to an array, line by line:

function getLines(textareaReference) {
  var str = escape(textareaReference.value)

var ar = str.split("%0D%0A")
// "%OD%OA" <=> "\r\n"

if (ar.length == 0)
ar = str.split("%0A")
// "%OA" <=> "\n"
for (var i = 0; i < ar.length; ++i) {
ar[i] = unescape(ar[i])
}

return ar
}

Figure 22-8.  A Windows 95-style button.

The function is a bit tricky. It first encodes the textarea’s value via the escape function and assignes the “escaped” string to a local variable, str. You may recall that after escape, any nonalphanumeric characters are represented in a “%XX” format. The escape sequence “\n” is represented as “%0A” (zero + A) whereas “\r” is converted to “%0D” (zero + D). The entire encoded string is then spliced with the split() method, using either the “%0D%0A” or the “%0A” string as the delimiter. The “trick” is to use the second delimiter (“%0A”) only after the first one (“%0D%0A”) fails to split the text. At the end, each element of the ar array is decoded back by the unescape function. The final array of lines is returned.

Hidden Object

HTML Syntax

A hidden form field is one that is not displayed on an HTML page. It is used for passing unique identification values upon submission. Since the user cannot modify or interact with a hidden element, the initial value given when the page loads stays the same throughout the life of the page. The hidden object, then, is not useful for the user but rather for the programmer. On a large Web site, a server-side application can use a hidden object to distinguish between different forms submitted to the server.

Except that it is not viewable, you should basically treat the hidden element exactly like the text type. The element’s general syntax is:

<INPUT
 TYPE="hidden"
 NAME="hiddenName"
 [VALUE="textValue"]>

The NAME property specifies the name of the hidden object whereas VALUE specifies the value of the field. Although not viewable, they are part of the form’s content, as any other element type’s attributes.

JavaScript Access

There are four ways to reference a hidden object:

[window.]document.formName.hiddenName
[window.]document.formName.elements[index]
[window.]document.forms[index].hiddenName
[window.]document.forms[index].elements[index]

Event Handlers

Since a hidden object cannot be seen on a page, no events can be associated with it, and hence there is no support for event handlers for hidden objects.

Properties and Methods

Since all methods associated with form element objects emulate events, a hidden object does not have any methods.

A hidden object does not feature any event handlers either, but it does have several properties which you can access via JavaScript. The object’s properties are:

• defaultValue
• name
• value

These properties are equivalent to those of the text, password, and textarea objects. You can read and set the value property, for example, at any time. The value property can be used to earmark forms submitted to the server for identification by a server-side application.

Button Object, Submit Object, Reset Object

HTML Syntax

The most precise input event is a button click. Submit, reset, and button objects are all buttons which feature identical properties and attributes. The general syntax of a button is as follows:

<INPUT
 TYPE="button" | "submit" | "reset"
 NAME="buttonName"
 VALUE="buttonText"
 [onClick="handlerText"]>

Figure 22-8 shows a simple example of a Windows 95-style button:

Although a plain button (<INPUT TYPE="button">) does not have any explicit meaning in HTML, it is extremely useful in JavaScript scripts. A submit button plays a very important role in all forms that are submitted to a server. A reset button resets the form in which it is located.

Figure 22-9.  A form with four elements: a simple numeric evaluation utility.

A button’s style depends on the client’s platform. Macintosh buttons, for example, are different from Windows 95 buttons. The only control you have over a button’s appearance is by determining its label, initially defined by the VALUE attribute. Since the button size is solely determined by the label string, you can only modify its width, by padding it with spaces on both ends. This “sophisticated” technique may be very annoying, but it is the only way to explicitly control a button’s size.

A submit button’s syntax differs from plain buttons and reset buttons only in the value assigned to the TYPE attribute "submit". This button is primarily designed for server-side applications. When the user clicks such a button, the form’s data is sent to the URL specified in the <FORM> tag’s ACTION attribute. A reset button’s TYPE is "reset" and, when clicked, it resets the entire form. A plain button (with no HTML meaning) is defined by assigning "button" to the TYPE attribute.

JavaScript Access

The four ways you can reference a button via JavaScript are:

[window.]document.formName.buttonName
[window.]document.formName.elements[index]
[window.]document.forms[index].buttonName
[window.]document.forms[index].elements[index]

Event Handlers

All button objects (button, reset, and submit) are associated with a single event, and therefore support only one event handler. This event handler is probably the most important of all form-related event handlers.

onClick

A button, by definition, has only one designation—to be clicked. Its event handler, therefore, responds only to a click event. Such an event occurs when the user presses the button and then releases it while the pointer is still atop the button. The event does not take place immediately when the user presses the button, in order to give the user a chance to cancel the clicking action by releasing it outside the button area.

You can use this event handler also with Submit and Reset buttons. The onClick event handler script is executed prior to performing the built-in action associated with a button. You can use this event, for example, to compute a certain expression and assign its value to the value property of an existing form element object.

The general syntax for this event handler is as follows:

<INPUT TYPE=... onClick="handlerScript">

Netscape Navigator 3.0 features a new option to cancel a click event. This can be done by having the event handler return false, much the same way you cancel a form’s submission or resetting. The canceled action is the one defined by the button (or other objects that support this event handler). Canceling a click event of a Submit button, for example, cancels the form’s submission.

Example 22-5 demonstrates the usage of the onClick event handler for invoking a function that handles other elements of the form:

<HTML>
<HEAD>
<TITLE>Expression evaluator</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

function compute(form) {
  form.result.value = eval(form.expression.value)
}

// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="text" NAME="expression"
VALUE="" SIZE=15> =
<INPUT TYPE="text" NAME="result"
VALUE="" SIZE=8 onFocus="this.blur()">
<P>
<INPUT TYPE="button" NAME="computeButton"
VALUE="compute" onClick="compute(this.form)">
<INPUT TYPE="button" NAME="clear"
VALUE="clear result" onClick="this.form.result.value=''">
</FORM>
</BODY>
</HTML>

Example 22-5. A simple expression evaluation script.