behavior:form

behavior:form

This element handles extended functionality of <form> elements. The behavior can be applied to any container where "compund value" is needed.

Intended use cases of the behavior:form :

  • classic web forms use cases – when attribute action is defined the behavior will do HTTP/POST to that URL with the data (a.k.a. value) of the form.
  • compound value container use cases – value of the form is a map of name/value pairs of named elements (that have attribute name defined) inside the form.

Elements

These elements have behavior:form applied by default:

  • <form>

Model

Any DOM element having name attribute defined inside the form is treated as submittable and participates in form value formation.

Value of the form is always compound (aggregate, map ) JSON value.

Example, value of the form:

<form>
   First name: <input}text name="first" value="Foo"> 
   Last name: <input}text name="last" value="Bar">
</form>

is

{
  first: "Foo",
  last: "Bar" 
}

Radio groups and check boxes

Group of radio elements having the same name is treated as a group. Value of the group is a single value – value attribute of :checked radio button.

Value of check box element is a content of its value attribute. If  checkbox ins not checked then it has undefined value.

Therefore value of the form:

<form>
   Name: <input|text name="firstName" value="Ivan">
Male: <input|radio name="sex" value="male" checked> Female: <input|radio name="sex" value="female"> Adult: <input|checkbox name="adult" value="mature" checked> Owns Cadillac: <input|checkbox name="ownsCadddilac" value="yes"> </form>

is

{
  firstName:"Ivan",
  sex: "male",
  adult: "mature",
  ownsCadddilac: undefined
}

Field groups

Some fileds can be grouped into named continers forming subobjects in value map:

<form>
   <div name="credentials">
     User name: <input|text name="un" value="Ivan">
     Password: <input|password name="pwd" value="12345">
   </div>
Save login: <input|checkbox name="parsistLogin" value="true" checked> </form>

produces value:

{  
   credentials: { 
     un: "Ivan", 
     pwd: "12345" },
   persistLogin: true; 
}

Attributes

These attributes are used in web forms cases:

  • action – URL, required for web form submission, receiver of submitted form data;
  • target – optional, name or id of target frame that will render rsponse of action URL;
  • method – the HTTP method that the browser uses to submit the form. Possible values are: "post" and "get". Default value: "post"
  • enctype – for method="post" defines MIME format of the submission, can be:
    • "application/x-www-form-urlencoded" – default value if the attribute is not specified;
    • "multipart/form-data" – is used when the form contains <input name="..." type="file">.

Events

  • FORM_RESET event – generated in response of <button|reset> click event inside the form. If this event is not consumed by script then the form clears values of inputs to their default values;
  • FORM_SUBMIT event – generated in response of <button|submit> click event inside the form. If this event is not consumed by script then the behavior send form values to the action URL;
  • FORM_VALUE_CHANGED event – generated in response of one of "change" events on inputs inside the form. The event is translated to "change" event on the form element.

Methods

submit
() – submits content of the form if its action attribute is defined on the form.
reset
() – resets input elements to their initial values.

Value

name/value map – object in TIScript terms with names corresponding to name attributes of DOM elements inside the form.

Form change handling in script

on() subscription

var frm = $(form#some);
frm.on("change", function() { var formValue = this.value; ... });
self.on("change", "form#some", function() { var formValue = this.value; ... });

decorators.tis handler

include "decorators.tis";
@change @on "form#some" :: ... event handling code ...;