Tutorial 9 - Working With Forms

User interaction is commonly accomplished through the use of HTML forms and their input controls. 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 input control elements.

As this tutorial relies heavily on their use, you should already be able to create HTML forms and include any input control in a functional layout. You may wish to refer to my Quick Forms for a fast review of your skills or to my Creating Forms page for more complete details.

accessing forms&controls
accessing control content

simple text control
toggle button

radio button confirmation

Accessing Form and Control Objects

Forms can be designed to permit controlled (ie. prevalidated) data (eg. radio buttons, check boxes and select lists) or free format data such as text entry boxes and file uploads using input controls. These forms can be checked before submission using the techniques that are discussed in form validation. 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 an input control object for reading or modifying it.

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

Input text controls (single line) and textarea controls (multiple line) are commonly used to output the results of processing the input 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 Button Caption

Some utilities use a toggle or push to start/push to stop button. One example is a run/pause button within a slide show. Since an input (button type) value is displayed as a caption, it is easy to alter the caption value with an if condition. Be sure to use an input type="button" element rather than a button element. There is also a multiple toggle button demo available.

flip=false;off="Start";on="Stop" // global to save state
flip=false;on="Stop";off="Start"; // global to save state
function toggle(pn){
p=parseInt(pn,10); // make sure its a number
if(flip){
  //insert stopping code action here
  document.getElementById('b'+p).style.background="lightgreen";
  document.getElementById('b'+p).value=off;
  }else{
  //insert starting code action here
  document.getElementById('b'+p).style.background="red";
  document.getElementById('b'+p).value=on;
  }
flip=!flip; // toggle th state of button
}

The above input control uses styling classes togglezone and b# for effect and the html is:

<div class="togglezone">
<input id="b0" class="togglezone" type="button" onclick="toggle('0')"
  value="Start"/></div>

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:2009 02 25]