Home > Products > TerraForm > Documentation >

JavaScript API

From version 2.7, TerraForm includes a simple JavaScript API designed to get and set field values as well as to enable and disable fields. THe supports almost all TerraForm fields.

All fields may now be referenced by ID. When you create a field, TerraForm will assign it an ID automatically. Alternateively, you may specify your own ID (use the id attribute). TerraForm will assign an ID as follows:

terraForm.[formName].[fieldName]

where [formName] is the name of the form, and [fieldName] is the name of the field. If there are several fields with the same name, then the ID will be as follows:

terraForm.[formName].[fieldName][x]

where [x] is the ordinal number (1, 2, 3,...) of the field with that name on the form.

Refer to a specific field like this:

document.getElementById('[ID]')

For example:

<tag:terraform
  name="calculator"
  alwaysdisplayform="yes"
>
  <messagesblock>
    <div class="error">
      <messages>
    </div>
  </messagesblock>
  <tag:terrafield
    name="number1"
    datatype="integer"
    size="3"
  />
  <tag:terrafield
    name="number2"
    datatype="integer"
    size="3"
  />
  <tag:terrafield
    name="sum"
    caption="Add values"
    format="button"
    onclick="alert(parseInt(document.getElementById('terraForm.calculator.number1').value)+parseInt(document.getElementById('terraForm.calculator.number2').value))"
  />
</tag:terraform>

TerraForm provides the following methods:

getDisabled()
Returns true if the field is disabled, and false if not.
setDisabled(value)
Sets the disabled state of the field (value is true or false).
toggleDisabled()
Reverses the disabled state of the field.
getValue()
Returns the value of the field. This is particularly useful for composite fields such as date pickers.
setValue(value)
Sets the value of the field. This is particularly useful for composite fields such as date pickers.

Call methods like this:

terraFormApi.fields['terraForm.[formName].[fieldName]'].getValue();

For example:

<tag:terraform
  name="toggleForm"
>
  <tag:terrafield
    name="myField"
    format="datepicker"
    default="#now()#"
  />
  <tag:terrafield
    name="toggleDisabled"
    caption="toggleDisabled()"
    format="button"
    onclick="terraFormApi.fields['terraForm.toggleForm.myField'].toggleDisabled()"
  />
   <tag:terrafield
    name="getValue"
    caption="getValue()"
    format="button"
    onclick="alert(terraFormApi.fields['terraForm.toggleForm.myField'].getValue())"
  />
</tag:terraform>

Application Programming Interface