There are no dedicated showcase example pages for the Uize.Node.Form module.

SEARCH FOR EXAMPLES

Use the link below to search for example pages on the UIZE Web site that reference the Uize.Node.Form module...

SEARCH

The Uize.Node.Form module defines the Uize.Node.Form package under the Uize.Node namespace.

1.2.1. Features Introduced in This Module

1.2.2. Features Overridden in This Module

1.2.3. Features Inherited From Other Modules

1.2.4. Modules Directly Under This Namespace

1.2.5. Unit Tests

Iterates through all the form elements found within a specified root node, calling the specified function for each node and passing the node reference as a parameter.

SYNTAX

Uize.Node.Form.doForAll (rootNodeSTRorOBJ,actionFUNC);

The value of the rootNodeSTRorOBJ parameter can be a string, representing the id of the root node, or an object reference to the root node. The root node can be either a form tag, or any DOM node that contains all the desired form elements, such as a div or other type of element.

2.1.1. An Example

<form id="myForm">
  <input id="myForm-myText" name="myText" type="text" value="blah"/>
  <input id="myForm-myCheckbox" name="myCheckbox" type="checkbox" checked="checked"/>
  <select id="myForm-mySelect" name="mySelect">
    <option value="1">One</option>
    <option value="2" selected="selected">Two</option>
    <option value="3">Three</option>
  </select>
</form>

Uize.Node.Form.doForAll (
  function (node) {
    node.className = 'formElement';
    Uize.Node.wire (node,'change',handleNodeChange);
  }
);

IMPLEMENTATION INFO

Harvests the values for all form elements found within a specified root node, and packages them into an object.

SYNTAX

valuesOBJ = Uize.Node.Form.getValues (rootNodeSTRorOBJ);

The value of the rootNodeSTRorOBJ parameter can be a string, representing the id of the root node, or an object reference to the root node. The root node can be either a form tag, or any DOM node that contains all the desired form elements, such as a div or other type of element.

By default, the keys of the values object generated by this method will be named according to the name attribute of the form elements from which values are harvested. However, different variations of this method also allow the id attribute to be used, and allow an optional prefix to be specified that should be removed when generating the key names.

VARIATION 1

valuesOBJ = Uize.Node.Form.getValues (rootNodeSTRorOBJ,useNodeIdBOOL);

When the optional useNodeIdBOOL parameter is specified, you can control whether or not the id attribute of form elements is used in naming the keys of the returned values object. Specifying the value true for this parameter will cause the id attribute to be used, while specifying the value false will cause the name attribute to be used.

VARIATION 2

valuesOBJ = Uize.Node.Form.getValues (rootNodeSTRorOBJ,useNodeIdBOOL,prefixSTR);

When the optional prefixSTR parameter is specified, you can specify a prefix that should be stripped off the ids or names of form elements when generating key names for the returned values object.

2.2.1. An Example

<form id="myForm">
  <input id="myForm-myText" name="myText" type="text" value="blah"/>
  <input id="myForm-myCheckbox" name="myCheckbox" type="checkbox" checked="checked"/>
  <select id="myForm-mySelect" name="mySelect">
    <option value="1">One</option>
    <option value="2" selected="selected">Two</option>
    <option value="3">Three</option>
  </select>
</form>

// Uize.Node.Form.getValues ('myForm') produces...
{
  myText:'blah',
  myCheckbox:true,
  mySelect:'2'
}

// Uize.Node.Form.getValues ('myForm',true) produces...
{
  'myForm-myText':'blah',
  'myForm-myCheckbox':true,
  'myForm-mySelect':'2'
}

// Uize.Node.Form.getValues ('myForm',true,'myForm-') produces...
{
  myText:'blah',
  myCheckbox:true,
  mySelect:'2'
}

NOTES

IMPLEMENTATION INFO

Enables or disables all of the form elements found within a specified root node, using the "disabled" node attribute.

SYNTAX

Uize.Node.Form.setEnabled (rootNodeSTRorOBJ,mustEnableANYTYPE);

The value of the rootNodeSTRorOBJ parameter can be a string, representing the id of the root node, or an object reference to the root node. The root node can be either a form tag, or any DOM node that contains all the desired form elements, such as a div or other type of element.

While typically a Boolean, the mustEnableANYTYPE parameter can be of any type and the node(s) will be enabled if it resolves to true, and disabled if it resolves to false - with the exception of undefined, when the node(s) will be enabled (see explanation below).

VARIATION

Uize.Node.Form.setEnabled (rootNodeSTRorOBJ);

When no mustEnableANYTYPE parameter is specified (or when its value is undefined), the node(s) will be enabled.

IMPLEMENTATION INFO

Lets you conveniently set the values for a set of form elements, using a values object.

SYNTAX

Uize.Node.Form.setValues (valuesOBJ);

By default, the keys of the values object specified by the valuesOBJ parameter are used as the ids or names for identifying the form elements. So, for example, a values object with a key of username will set the value for the form element whose id or name is username.

VARIATION

Uize.Node.Form.setValues (valuesOBJ,prefixSTR);

When the optional prefixSTR parameter is specified, then a prefix can be specific that will be added before the names of the keys in the values object, when generating the ids or names of their corresponding form elements. For example, when the value 'myForm-' is specified for the prefixSTR parameter, then a values object with a key of username will set the value for the form element whose id or name is myForm-username.

2.4.1. An Example

<form id="myForm">
  <input id="myForm-myText" name="myText" type="text"/>
  <input id="myForm-myCheckbox" name="myCheckbox" type="checkbox"/>
  <select id="myForm-mySelect" name="mySelect">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</form>

Uize.Node.Form.setValues (
  {
    myText:'blah',
    myCheckbox:true,
    mySelect:'2'
  },
  'myForm-'
);

NOTES

IMPLEMENTATION INFO

IMPLEMENTATION INFO