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

Intended use cases of the behavior:form :


These elements have behavior:form applied by default:


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

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

Example, value of the form:

   First name: <input|text name="first" value="Foo"> 
   Last name: <input|text name="last" value="Bar">


  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 is not checked then it has undefined value.

Therefore value of the 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">


  sex: "male",
  adult: "mature",
  ownsCadddilac: undefined

Field groups

Some fields can be grouped into named containers forming sub-objects in value map:

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

produces this value:

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


These attributes are used in web forms cases:



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


name/value map - object in script 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; ... });

event handler

event change $(form#some) { ... event handling code ... }