Native: Form

Defines a constructor for the native form element which will construct a form and its inputs into a table layout of name » input pairs.

Author: Aaron Newton

Form method: constructor

Syntax

new Form(options);
 

Arguments

1. options - (object) a set of key/value options

Options

• inputTableProperties - (object) set of options for HtmlTable
• tipOptions - (object, optional) set of options for Tips if you're using it
• data - (object) the form input data (see section below)
• element properties - (object) any property that can be passed to the native Element constructor can be passed in here to be applied to the element. styles, event, class, id, action, etc.

Data

You can pass in an object that describes a set of inputs. Each object in the data set should have the following properties:

• name - (string, required) the name of the input; this is the key of the input's data in the data object (see example)
• tagName - (string, required) the tag name (input, textarea, or select)
• tip - (string, optional) the tool tip value for the input if you want to use Tips
• instructions - (string, optional) the text that shows up next to the input; if not specified the name above is used
• element properties - (object) any element property can be specified - styles, events, id, value, etc

Example

var search = new Form({
    action: '/foo.php',
    styles: {...},
    events: {...},
    data: {
        query: {
                tagName: 'input',
                type: 'text',
                tip: 'search::input a name and hit <enter> to get results',
                value: '',
                style: {
                        width: '100%'
                }
        },
        orderBy: {
                tagName: 'select',
                instructions: 'order by: ',
                style: {
                        width: '100%'
                },
                values: [
                    {value: 'name'},
                    {value: 'rating', text: 'user rating', selected: true}
                ]
        },
        submit: {
                tagName: 'input',
                type: 'submit',
                style: {
                        'float': 'right'
                },
                value: 'submit'
        }
    }
});
//some native methods work (see below)
search.inject(document.body).setStyle('color', '#777');
search.createInput(name, data);
search.fireEvent('submit');
 

Returns

• (object) A new instance of Form

Form methods: injection and events

The following native element methods work directy on this class:

• adopt
• inject
• wraps
• grab
• replaces
• empty
• dispose
• toQueryString
• addEvent
• fireEvent
• addEvents
• removeEvent
• removeEvents

Example

var myForm = new Form(...);
myForm.inject(document.body);
 

Form method: dollar

You can acquire the form element itself by wrapping your instance with $.

Example:

var myForm = new Form(...);
$(myForm).setStyle('display', 'none');
$(myForm).submit();
 

Form method: disable

Disables all the inputs in the form.

Syntax

myForm.disable();
 

Form method: enable

Enables all the inputs in the form.

Syntax

myForm.enable();
 

Native: Form.Input

Creates a new input element based on the data passed in.

Syntax

new Input(name, tag, properties);
 

Arguments

1. name - (string) the name of the input
2. tag - (string) the type of input - text, submit, checkbox etc.
3. properties - (object, optional) a set of key/value element properties - styles, events, id, class etc;

Example

new Input({
    query: {
            tagName: 'input',
            type: 'text',
            value: '',
            style: {
                    width: '100%'
            }
    }
});
//outputs: <input type="text" name="query" style="width: 100%"/>
 

Returns

• (element) the input element

Native: Form.SelectList

Extends: Form.Input

Creates a select list with a group of options.

Syntax

new SelectList(name, optionsData, properties);
 

Arguments

1. name - (string) the name of the input
2. optionsData - (array, optional) an array of options data objects (see below)
3. properties - (object, optional) a set of key/value element properties - styles, events, id, class etc;

Example

new SelectList('fruits', [
        {value: 'apples'},
        {value: 'grapes_green', text: 'green grapes', selected: true},
        {value: 'grapes_purple', text: 'purple grapes'}
    ], {
        styles: {...},
        events: {...},
        id: 'fruits',
        multiple: true
    });
 

Returns

• (element) the select element