Tutorial 9 - Working With Forms

User interaction is commonly accomplished through the use of HTML forms and their control objects. Interaction involves acquiring data and then performing some task based on that information. The results can be presented either with dialogs or more commonly by using other control objects.

As this tutorial relies heavily on their use, you should already be able to create an HTML form and include controls in a functional layout. Refer to my Creating Forms and Quick Forms pages for details.

accessing forms&controls
accessing control content

simple text control
toggle buttons
radio button confirmation

Accessing Form and Control Objects

Forms can be designed to permit controlled (ie. prevalidated) data such as radio buttons, check boxes and select lists or free format data such as text entry boxes and file uploads using controls. These forms can be validated before submission. The controls can also be used for input and output in client-side utilities that are never submitted to an external server. Note that there are two techniques for referencing a control object when reading or modifying.

The DOM level 1 element access method (new way) requires NO form element and uses the format:

document.getElementById('control_id')

Use the element method [PREFERRED WAY] when:

XHTML specification is used!
the input controls are for client-side use (ie no server submission) and action on enter key is not wanted.

Note: Removal of the form element helps suppress false submissions in some browsers. See the validation by entry topic for an alternate technique.

The DOM level 0 form access method (old way) requires a surrounding form element and uses these formats:

document.form_name.control_name
document.forms['fname'].elements['ename']
document.forms[fidx].elements[eidx]

Use the form method (old way) when any of the following conditions apply:

action is wanted on the enter key [use onSubmit -- there is no onEnter or onReturn event]
many elements have to be passed to a single function.
multiple field validations are to be done with arrays.
a form is required for CGI submission purposes.

Note: Gecko engine based browsers (eg FireFox) do not treat form objects in the same manner as MSIE and Opera. To them, forms are not globally accessible so either they are passed to the called function as an object or the specific value is passed. MSIE can access a form by using its specific name in the function. If you always pass the form through as a function parameter your routines will work in both sets of browsers! And it is better programming practice too!

Accessing Control Contents

Most controls can have their contents accessed or updated through the value property of the control's object. When used on the right side of an (equal's) assignment, the current value of the object is read. When used on the left side of an assignment, the object is updated. Exceptions to this general rule are:

Button Control: Use the innerHTML property to access the caption. Value works only for MSIE browsers!
Check Box: Use the checked property. The value is either true or false.
Radio Buttons: Use the checked property. The value is either true or false. Since all radio buttons in a group have the same name, the individual object is accessed via an index. Indexes are numbers in square brackets such as radioButton[0] etc. (NOTE: index numbering starts at zero with the first reference in the HTML document.)
Select List: The selectedIndex property holds the position in the list of the first currently selected item. A value of -1 indicates no selection has been made or it has been deselected.
form_name.control_name[form_name.control_name.selectedIndex].value reads the value (ie. what is assigned by the value attribute of the current selection.
form_name.control_name[form_name.control_name.selectedIndex].text reads the text (ie. what is contained in the option element) of the current selection.
Note: If multiple selections are allowed, you must cycle through the entire select control, testing the selected property of each item in the options array.
Note2: If you are trying to support the MSIE browser, use the multiple selection method, even if only one selection is allowed.
Textarea: Use the innerHTML property. No tags will be interpreted!
Caution: Nothing works for textarea in Opera! Fall back to older DOM0 methods.
File: The file control uses FileUpload.value (note that the Object name is not the same as the type value - this is done to deliberately confuse programmers!)

Note: Although radio buttons are the most commonly indexed input control, any control can be set up for indexing by reusing (overloading) its name attribute in HTML. One appropriate use would be for gathering a column of numbers (perhaps scores or unit prices) in an array within a loop and doing totals or averages. The arrays always start at '0' and are accessed similar to the radio control example above.

Simple Text Control

Text input (single line) and textarea (multiple line) controls are commonly used to both input and output freeform data. The simplest cases are explained in my QuickForms tutorial. The following example places the results of the system object Date method toString() into an input area. The input box is made readonly to prevent typing to it.

Since this is a simple action it can be done within the event call itself such as:

<button onclick="now=new Date();document.getElementById('t').value=now.toString();">
Display date &amp; time</button>
<input id="t" class="box300" type="text" readonly="readonly"/>

However a more structured and easier to read approach is to separate the programming action into its own function that can be removed to the head section of the document (or even to a separate file). The activating event passes one control object to the called function so that it can be updated.

function showDate(thisObj){
  /* create a Date object using the system clock */
  now=new Date();
  /* convert contents to string and place in control */
  document.getElementById(thisObj).value=now.toString();}
................
<button onclick="showDate('t');">Display date &amp; time</button>
<input id="t" type="text" readonly="readonly"/>

Toggle Buttons

Some utilities use a toggle or push to start/push to stop button. One example is a run/pause button within a slide show. It is easy to alter a button's caption using its value property but only if you use an input type="button" element rather than a button element. Use arrays for the off caption, on caption and state as well as a switch construct to control the action statements for the set of buttons. Note that an onload="toggleInit()"; is required for initialization and styling.

offs=["Start","True","One"]; // off values array
ons=["Stop","False","Two"]; // on values array
flips=[false,false,false]; // button state array
function toggleInit(){ // set initial captions
for(p=0;p<=2;p++){
  bObj=document.getElementById('b'+p);
  bObj.style.background="lightgreen";
  bObj.style.width="45px";bObj.value=offs[p];}}
function toggle(pn){ // p has switch posn #
p=parseInt(pn,10); // be sure it is a number
if(flips[p]){
//state is true so switch off actions go here
  switch(p){
//  case '0':b0_turnOff();break;
//  case '0':b1_turnOff();break;
//  case '0':b2_turnOff();break;
//  case default:alert('Error: Defining button actions');
    }
  document.getElementById('b'+p).style.background="lightgreen";
  document.getElementById('b'+p).value=offs[p];
  }else{
//state is false so switch on actions go here
  switch(p){
//  case '0':b0_turnOn();break;
//  case '0':b1_turnOn();break;
//  case '0':b2_turnOn();break;
//  case default:alert('Error: Defining button actions');
    }
  document.getElementById('b'+p).style.background="red";
  document.getElementById('b'+p).value=ons[p];
  }
flips[p]=!flips[p]; // reset button state
}

Example: Radio Button Confirmation

There are times when you may need to confirm that something has been read or an agreement made before access is given to a page. This can be done easily with a radio button control. Even more design elements (legend and fieldset) are included in this example. Note their effect.

Licence Agreement

This licence covers all versions of Niagara Learning Software encryption mechanisms. The vendor is not liable for any damage to hardware or loss of data through the use of any Niagara Learning System software. The licensee will not reverse engineer or manipulate the code in any manner in order to disable or enhance any functionality. The licensee is not entitled to distribute the software in any manner except for use on the licensee's computers and those of his employees. Any violation of this agreement will result in immediate termination of the contract and the loss of the licensee's first born.
I have read and accept this agreement Yes No

This licence covers all versions of Niagara Learning Software
encryption mechanisms.
The vendor is not liable for any damage to hardware or loss of
data through the use of any Niagara Learning System software.
The licensee will not reverse engineer or manipulate the code
in any manner in order to disable or enhance any functionality.
The licensee is not entitled to distribute the software in any
manner except for use on the licensee's computers and those of
his employees.
Any violation of this agreement will result in immediate
termination of the contract and the loss of the licensee's
first born.

I have read and accept this agreement Yes No

Here is the button setup and event call. For the complete form read the source file.

<label for="y">I have read and accept this agreement</label>
<input id="y" name="rbc" type="radio"/>
<label for="y">Yes</label>
<input id="n" name="rbc" type="radio" checked="checked"/>
<label for="n">No</label>
<button onclick="doYes(document.getElementById('y').checked);">
View Sitemap</button>

And here is the JavaScript function. The === is important!

function doYes(entry){
if(entry===true){
  window.location.href="http://home.cogeco.ca/~ve3ll/sitemap.htm";
  }else{alert("Sorry - You must sign agreement to access Sitemap");}
}

Note: In this example I chose to pass only a simple data value rather than a control or complete form. It was sufficient for performing a test. However if feedback to a form control is needed, then the form or at least the control must be passed. Some programmers choose to always pass the form for consistency.

If you want this agreement to be remembered so that it doesn't have to be repeated, you will need to bake a cookie as described in the Cookies tutorial. If you need to log that an agreement was made, you will need to do a mailto submission as outlined in the Quick Forms tutorial. If you need security (ie. a concealed jump address), try FlashPeak's CryptHTML or invisitec.com.

JR's HomePage | Comments [jstutor9.htm:2010 02 03]