Unofficial JDA (Javascript Dataflow Architecture) WikiPublic Space

This blueprint takes form elements from an input terminal provided array, and parses the different kinds properly (radio, option, et.c.).

The name of the input fields defined by their "name" attribute will be used as the key for the object literal emitted when the form is submitted.

Note! This blueprint also handles input elements which it wraps, so the easiest way to start using it, is to define it in a form tag, and then happily add inside it whatever input elements you fancy manually.

If the property value allow_direct_submission is set to false, all enclosed submit buttons are disabled, and the input terminal submit_request_in is used to trigger submission to the output terminal.

Sample Declaration

<div id="form1"  
     impl="~01BD0F00025EAA4b53A6E116F739172DCA"
     connections=" 'fields_out' : [['othercomponent', 'input']]"    
     script="http://localhost/Form.js">
<form>
<input type="text" value="keyword" />
<input type="submit" />
</form>
</div>

## Input Terminals + fields_in:**fields_in**: + (expectedexpected message type 1. An associative Array with values for each of the currently defined elements within the form. + **submit_request_in** + expected message type:type Any, almostor any, preferably an Array) + submit_request_in :none; used to trigger a submit event ## Output Terminals + fields_out:**fields_out** + An array of fields and values ## Properties + allow_direct_submission:**allow_direct_submission** + controlscan ifbe falseset thatto the formfollowing willvalue waittypes: 1. untiltrue 2. submit_request_in for form submission, toherwise as soon as submit is pressed.false ## Demos that use it + form.html + hierarchical_encapsulation.html + http.html + yahoosearch.html + map.html + multi_map.html ## How does it work? When the form enclosed within the infotron is submitted, the values found in the input fields are encoded as a JavaScript object literal (i.e. similar to a dictionary in Python) and emitted through this output terminal. -----

BLUEPRINT(
"~01BD0F00025EAA4b53A6E116F739172DCA", 
[
 ["fields_in", "onPopulate", 10],
 ["submit_request_in", "onSubmit", 10]
],
[
 "fields_out"
],
function(Class) {
    
  Class.prototype._onInit = function(props)
  {
    var self = this;

    this._o = this.dom_node;
    this._f = this._o.getElementsByTagName("FORM")[0];

    if (this._f) {
        if (!props["allows_direct_submission"]) {


    function _onSubmit(e)
      { 
return self._onSubmit();
    };

        this._f.action = null;
        this._f.onsubmit = _onSubmit;
        }
        var elems = this._f.elements;
        var n = elems.length;
        var i;
        
        for (i = 0; i < n; i ++) {
        if (elems[i].type == "submit" && 
            elems[i].disabled == true) {
            elems[i].disabled = false;
        }
        }
    } else {
        this.error("Missing  element");
    }
  };

  Class.prototype._onSubmit = function()
    {
        var elems = this._f.elements, n = elems.length, d = {};
        var i, name, val;
    
        for (i = 0; i < n; i ++) {
            name = this._f.elements[i].name;

            if (name) {
              val = this._f.elements[i].value;

              if (d[name]) {
                if (typeof(d[name]) != "object" || !d.sort) {
                  d[name] = [d[name], val];
                } else {
                  d[name].push(val);
                }
              } else {
                d[name] = val;
              }
            }
        }

        this.postMessage("fields_out", d);

        return false;
    };


  Class.prototype.onSubmit = function(msg)
  {
    this._onSubmit();
  };

  Class.prototype.onPopulate = function(msg)
  {
    var key, field, i, n, v, tag, field_type;
    
    for (key in msg) {
      field = this._f[key];
      v = msg[key];
      
      try {
    tag = field.tagName;
    
    if (tag == "SELECT") {
      
      field.length=msg[key].length;
      
      this._setField(field, tag, v);
    } else if (tag == "TEXTAREA") {
      this._setField(field, tag, v);
    } else {
      if (tag == "INPUT") {
        tag = field.type.toUpperCase();
        this._setField(field, tag, v);
      } else {
        n = field.length;
        
        for (i = 0; i < n; i ++) {
          tag = field[i].type.toUpperCase();
          this._setField(field[i], tag, v[i]);
        }
      }
    }
    
      } catch (ex) {
    this.warning(ex, key + " is not a valid field");
    continue;
      }
    }
  };

    Class.prototype._setField =function(field, field_type, v)
    {
        var i, n, o;

        try {
        switch(field_type) {
        case "IMAGE": {
            field.src = v;
            break;
        }
        case "RADIO": {
            if (typeof(v) == "object" && v.constructor == Array) {
            checked = v[1];
            v = v[0];

            if (checked) {
                field.checked = true;
            } else {
                field.checked = false;
            }
            }

            field.value = v;

            break;
        }
        case "CHECKBOX": {
            if (v) {
            field.checked = true;
            } else {
            field.checked = false;
            }
            break;
        }
        case "SELECT": {
            n = v.length;
            for (i = 0; i < n; i ++) {
            o = field.options[i];

            if (!o) {
                o = new Option();
                field.options[i] = o;
            }

            o.value = v[i][1];
            o.text = v[i][0];

            if (v[i][2]) {
                field.selectedIndex = i;
            }
            }
            
            break;
        }
        default: {
            field.value = v;
            break;
        }
        }
        } catch (ex) {
        this.error(ex, "invalid value specified for input field of \
type " + field_type);
        }           
    };


    
}, "Generic Form");