Stay tuned Watch us Facebook Twitter

Thanks! We`ll keep in touch.

Sign up for our Peggy Journal

Get the latest Peggy Forms news, features and great offers!

Name
Email

index

Javascript API

There is some communication possible in javascript to connect your own custom scripts to Peggy Forms.

Via the Peggy Forms class in Javascript you can access formfields, get and set values and add events.

Getting data

Get the data of all formfields in a javascript object:
Call: PeggyForms.getData()
Returns:

{
	firstname: value,
	lastname: value,
	..
}

Getting a field

Get a formfield by its fieldname. The fieldname can be set in the basic field properties in the Peggy Forms editor.
Call: PeggyForms.getField("fieldName")
Returns: a javascript FormElement class

With this class you can get or set the value, add events, manage state and add your custom validator!

Methods:

Description method Example/content
Gets the value of a field getValue()  
Sets the value of a field setValue(value)  
Set the layout of a field setLayout() 1/3, 2/5, ..
Set the layout of the input in a field setInputLayout() 1/3, 2,5, ..
Set the alignment of the input if ajusted the input layout layoutInputAlignment() left/center/right
Ajust the vertical alignment layoutVerticalAlign() top/center/bottom
Get the label getLabel()  
Get the sublabel getSubLabel()  
Set the label setLabel(label)  
Set the sublabel setSubLabel(label)  
Get the visible state of the field getVisible()  
Set the visible state of the field setVisible(visible) true/false
Get the readonly state of the field getReadonly()  
Set the readonly state of the field setReadonly(v) true/false
Get the required state of the field getRequired()  
Set the required state of the field setRequired(v) true/false
If the field has list-data, for example the dropdown or choice fields, you can set the data with this function setData(data) [ { key: 1, value: "your label text", .. }]
Or just add 1 option to a list addDataOption( keyValueObject, index = null) { key: 10, value: "My label" }
Set the input type of a single line text field setInputType(inputType) Text/Date/Number/Hidden/Password/Email/Color
If you use ajax/http on this field, the HTTP response can be retrieved via this function getAjaxResult()  

Usage:

let field = PeggyForms.getField("myFieldName");
field.setLabel("New label");
field.setLayout("1/3");

Events:

onkeyup
onchange
onajaxloaded

Usage:

let field = PeggyForms.getField("myFieldName");
field.onchange.add( function(field) { alert(field.getValue(); yourcode.. } )

Adding a custom validator

It is very easy to add your own custom validator. Lets say we only want to allow the text "test" in our input. Add the following code to your page to accomplish this.

let field = PeggyForms.getField("field");
field.addInputValidator(
    function(_field) {
        return _field.getValue() === "test";
    },
    "This value must be 'test'"
);