Netscape DevEdge

Skip to: [content] [navigation]

Simplify Form handling With the CFormData JavaScript object.

Introduction

Using HTML forms to process data in web pages can be a complicated affair due to the different representations of the inputs, validation, initializing forms, cross-browser. CFormData is a JavaScript™ Object designed to simplify several common tasks when dealing with forms.

CFormData provides:

Synopsis

CFormData.js implements the JavaScript Object CFormData.

Constructor
CFormData()

Constructs an instance of CFormData. CFormData manages a set of named values which can correspond to the input elements of a form although the named values of the CFormData are not identical to the input elements of a Form.

Properties
Object mValueHash

mValueHash contains the named values managed by this instance of CFormData.

Array mNames

mNames is an Array of all of the names managed by the object.

Object mValidatorHash

mValidatorHash contains the validation functions for each named value.

Methods
init()

init() resets the instance of CFormData object to empty.

String or Array getValue(String aName)

getValue() returns the value(s) associated with the given name aName. Note getValue() will return a single value if the named value has only a single value or an Array if multiple values are set.

setValue(String aName, Object value)

setValue() sets the value of a named value. To set a single valued value, pass a single value in aValue. To set multiple values pass an array of values.

setValueFromInput(HTMLInputElement input)

setValueFromInput() sets the value of the named value to that of the given input element.

setValidator(String aName, Function aValidator, String aMessage)

setValidator sets a validation function aValidator for the name value aName. aMessage is a user message designed to inform the user of the correct values for the input.

The aValidator function has the same signature as the setValidator method. It returns true if the named value is valid, and false otherwise.

validate(String aName)

validate() calls the validation function for the value named aName returning true if value passes the validation and false otherwise.

getMessage(String aName)

getMessage() returns the validation message for the named value aName.

getNames()

getNames() returns an array containing the names of all values contained in the object.

fromString(String aQueryString)

fromString loads the instance of CFormData from the query string into the object.

fromForm(HTMLFormElement form)

fromForm() loads the inputs from the specified form into the object.

toString()

toString() creates a query string corresponding to the values contained in the object.

toForm(HTMLFormElement form)

toForm() loads the values in the object into the specified form.

Example 1

Example 1 illustrates the basic use of CFormData to manage initializing a form from a query string. Enter values into the form and press submit to see CFormData in action.

Example 2

Example 2 illustrates a more advanced use of CFormData, including synchronizing the values of the CFormData object with the values entered into a Form, and performing validation.

Change Log

2003-07-14
  • Fixed bug in handling radio, checkbox, selects with only one instance
A–+R