Online Documentation Server
 ПОИСК
ods.com.ua Web
 КАТЕГОРИИ
Home
Programming
Net technology
Unixes
Security
RFC, HOWTO
Web technology
Data bases
Other docs

 


 ПОДПИСКА

 О КОПИРАЙТАХ
Вся предоставленная на этом сервере информация собрана нами из разных источников. Если Вам кажется, что публикация каких-то документов нарушает чьи-либо авторские права, сообщите нам об этом.




Previous Table of Contents Next

Since we haven’t discussed buttons yet, this script uses links for invoking JavaScript functions. A link is not a form element, so you cannot refer to this or this.form inside the resetField() function. To work around this problem, each link is identified by the index of the corresponding text object and is handed to the function as an argument. The first link, for example, is responsible for resetting the first text object in the form, so it hands a 0 to the resetField() function. Instead of resetting the form element, the function sets the current value of the corresponding text field to its default value.

name

It is generally a good practice to name every form element, and especially the text objects. Names are mandatory for CGI scripts which use them for field identification and value extraction. Since it allows a more logical and convenient access to JavaScript text objects, identifying text objects by names contributes significantly to the script’s robustness and ease of maintenance. All names, therefore, should be meaningful and adhere to JavaScript’s naming conventions.

The name property initially reflects the value of the HTML’s NAME attribute. Changing the value of this property overrides the initial HTML setting. By assigning a new string to the name property, you can set the name of a text object at any time.

Do not confuse this property with the text that appears in the field. A field’s content is represented by the VALUE attribute, rather than the NAME attribute. Hence, if you modify the value of name, you will notice no change in the page’s appearance.

You should recall that a form element can be referenced by its index or by its name. If a form contains multiple elements with identical names, they form an array. Although this situation is especially common to radio buttons, as you will see later in this chapter, you may encounter it with text objects as well. The following example demonstrates the use of such arrays to handle complex forms:

<HTML>
<HEAD>
<TITLE>Form element arrays</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

function correctName() {
  for (var i = 0; i < document.fields.username.length; ++i) {
 var field = document.fields.username[i]
 field.value = field.value.charAt(0).toUpperCase() + field
  .value.substring(1, field.value.length)
  }
}

function checkEmail() {
  for (var i = 0; i < document.fields.email.length; ++i) {
 var field = document.fields.email[i]
 if (field.value.indexOf("@") == –1) {
  alert("Error in email address!")
  field.focus()
  field.select()
  return
 }
  }
}

// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="fields">
Employee #1: <INPUT TYPE="text" NAME="username"
VALUE="first name" SIZE=10>
<INPUT TYPE="text" NAME="username"
VALUE="last name" SIZE=10>
<INPUT TYPE="text" NAME="email"
VALUE="email" SIZE=10><BR>
Employee #2: <INPUT TYPE="text" NAME="username"
VALUE="first name" SIZE=10>
<INPUT TYPE="text" NAME="username"
VALUE="last name" SIZE=10>
<INPUT TYPE="text" NAME="email"
VALUE="email" SIZE=10><BR>
Employee #3: <INPUT TYPE="text" NAME="username"
VALUE="first name" SIZE=10>
<INPUT TYPE="text" NAME="username"
VALUE="last name" SIZE=10>
<INPUT TYPE="text" NAME="email"
VALUE="email" SIZE=10><BR>
<P>
<A HREF="javascript:checkEmail()">Check email addresses</A>.
<A HREF="javascript:correctName()">Correct names</A>.
</FORM>
</BODY>
</HTML>

Example 22-4. A form validation script based on arrays reflecting elements with identical names.


Figure 22-6.  A password box after typing in a six-letter string.

In order to understand this listing you must be aware of the page’s initial appearance:

As you can see, this form is divided into nine text objects. All six text objects for entering first and last names are named username. The value of document.forms[0].elements[0].name, for example, is equal to the string "username". The three text objects for entering e-mail addresses are named email.

There are basically two element groups, username and email. Since all form elements are named fields, you can reference these two groups as arrays, via the following syntax:

document.fields.username
document.fields.email

Both arrays have a length property, representing the number of elements sharing the given name. The length and elements of the username array, for example, can be referenced as follows:

document.fields.username.length // number of name-related elements
document.fields.username[0] // first First Name object
document.fields.username[1] // first Last Name object
document.fields.username[2] // second First Name object
document.fields.username[3] // second Last Name object
document.fields.username[4] // third First Name object
document.fields.username[5] // third Last Name object

The same syntax is also used to reference elements of the email array. Take another look at the script in Example 22-4. It includes two functions, one for handling name input fields and one for e-mails. The first function, correctName(), loops through all username elements and capitalizes their first letters. The second function uses the same technique to alert the user if any of the e-mail addresses do not include the “at” character (@). If such a field is found, the function focuses on and selects it, in order to attract the user’s attention to the invalid field.

You should normally assign a distinct name to each and every form element. Example 22-4 demonstrates that in some cases, however, it is much more convenient to reuse a specific name in order to enable a loop-based processing of elements which share similar characteristics.

Previous Table of Contents Next


With any suggestions or questions please feel free to contact us