Form Class

Used to create a container with form inputs

Constructors

Form( parent, config )

Used to instantiate this class

parent	DOM element in which to render this component
config	Configuration settings (optional). See config options for more information.

Config Options

onsubmit

Show Source

items

An array of items that make up the form (e.g. form inputs and labels).

Show Source

buttons

An array of buttons that will be placed at the bottom of the form (e.g. submit, cancel, reset). Example:

            buttons: [
                {
                    name: "Submit",
                    onclick: function(){
                        var values = form.getData();
                        //TODO: validate form data
                    }
                },
                {
                    name: "Reset",
                    onclick: function(){
                        form.clear();
                    }
                }
            ]

Show Source

style

Style for individual elements within the component. Note that you can provide CSS class names instead of individual style definitions.

Show Source

Events

onChange( input, value )

Called whenever a field changes value in the form

Show Source

onResize( )

Called whenever the form is resized

Show Source

Public Methods

resize( )

Used to update the layout of all the elements in this component

Show Source

getForm( )

Returns the "form" element underpinning this component

Show Source

reset( )

Resets all inputs in the form to thier original values.

Show Source

clear( )

Clears all values in the form.

Show Source

getData( )

Returns the values for all the form inputs in JSON notation. Note that if the form has multiple inputs with the same name, the associated value will be an array. You can test whether the value is an array using the "instanceof Array" operator.

Show Source

getFormData( )

Returns the values for all the form inputs as a FormData object

Show Source

addButton( name, enabled, onclick )

Used to add a button to the bottom of the form

Show Source

getButton( name )

Returns a button found at the bottom of the form

name	Name of the button (input.name)

Show Source

getButtons( )

Returns all the buttons found at the bottom of the form as an array

Show Source

getGroups( )

Returns an array of groups found in the form. Each entry in the array has a name and custom methods for the group.

Show Source

showGroup( name )

Used to display a hidden group.

Show Source

hideGroup( name )

Used to hide a group box.

Show Source

enableField( name )

Used to enable a form input. Returns true if the field was found and is enabled.

Show Source

disableField( name )

Used to disable a form input. Returns true if the field was found and is disabled.

Show Source

hideField( name )

Used to hide a form input. Returns true if the field was found and hidden from view.

Show Source

showField( name )

Used to unhide a form input. Returns true if the field was found and is visible.

Show Source

showError( errorMessage, field )

Renders a popup error message over a given field

Show Source

hideError( field )

Hides a popup error message over a given field

Show Source

getValue( name )

Returns the value for an input in the form.

Show Source

setValue( name, value, silent )

Used to set the value for an input in the form.

name	Input name or label associated with the input.
value	A value for the input.
silent	By default, if the input value is changed, it will fire. the onChange event. When silent is set to true, the input will NOT fire the onChange event. This parameter is optional.

Show Source

findField( name )

Used to find a row in the form.

name	Input name or label associated with the input.

Show Source