JavaScript refresher — Forms

Forms are a natural part of both sides of the web, informational sites
and applications. Client-side scripting (JavaScript, JScript) offers ways
to make forms easier and more pleasant to use. A well-written client-side
script can check the data entered in a form before it’s submitted,
insert preselected data, or link dependent drop-down menus.

This is the first in a series of articles on working with forms. The aim of the series 
 is to explain how to use client-side scripts with forms, especially for beginners. 
 Let’s get started.

Basic form structure

All forms in a document are grouped in the array forms, which
is known as the forms collection. The index into this zero-based array is 
always the form name, given by the value of the name attribute on the form element. It’ll be
easier to see in the following example.

In this case, the forms array contains two forms. The form
we want to work with in a client-side script can be selected through forms
in three ways.

Selecting a form

• document.forms["jméno formuláře"]
• document.forms[pořadový index]
• document.jméno_formuláře

In our example, we’d select the first form as follows:

• document.forms["foo"]
• document.forms[0]
• document.foo

What to avoid

You’ll sometimes come across two more methods that Internet Explorer introduced
as proprietary extensions. The first uses the all
array, for example document.all.foo or document.all["foo"].
There’s no need nowadays to use all

The second comes from Internet Explorer letting you write an array index
with parentheses. So you may come across code like document.forms("foo"),
which will work in Internet Explorer but leave us with a lot of work
tracking down the error in Mozilla.

I strongly recommend avoiding both constructions. Preventing compatibility bugs in
client-side scripts as you write them is far cheaper than tracking them down and
fixing them in production.

Form controls

Each form consists of a group of controls (button, checkbox, fileupload,
hidden, password, radio, reset, select, submit, text, textarea) grouped
in the elements array. Again, the array is indexed by the value of the name attribute on the
form control.

Selecting a form control

Selecting a particular control follows the approach used for selecting a form
with one difference. We work with the elements array. Again there are three
ways to select a particular control.

• document.forms["jméno formuláře"].elements["jméno prvku"]
• document.forms[pořadový index].elements[pořadový index]
• document.jméno_formuláře.jméno_prvku

You can combine the approaches above to select a form and a particular control. 
 You can select the form by index and the control by name: 
 document.forms[pořadový index].elements["jméno prvku"]. The methods 
 we should avoid are the same as 
 for forms.

Iterating over form controls

Many solutions involve iterating over a group of form controls, for example 
 to validate them. Let’s demonstrate iteration with the previous example, 
 or more precisely, with the previous form:

elm = document.forms["regudaje"]. elements;
    for(foo = 0; foo < elm.length;foo++){
      elm[foo];//konkrétní element
    }

Form controls with the same name

A form is sometimes structured so that some of its controls share a name. 
 A classic example is a choice made with radio buttons, as in the following
 example.

Muž:
 Žena:

If we select the controls by index, everything works as described earlier. 
 The first radio button is at index 0 and the second is at index 1. 
 If we choose to select form controls by name instead, 
 we need to remember that controls with the same name (the same name attribute value)
 are indexed numerically within that name as well. See the following example:

/*
     * elm1 indexem
     * elm2 jmenem 
     */ 
    elm1 = document.forms["regudaje"].elements[0];
    elm2 = document.forms["regudaje"].elements["pohlavi"];
    alert(elm1 == elm2);// false - neukazuje na stejný prvek
    
    elm2 = document.forms["regudaje"].elements["pohlavi"][0];
    alert(elm1 == elm2);// true - ukazuje jiz na stejný prvek

Form controls with the same name can sometimes cause problems if we forget 
 that they’re indexed within that name. That wraps up the first refresher 
 on forms. Next time we’ll look at form attributes, moving form 
 data between windows, and other useful tips for working with forms.