On Change Event

All Data entered by an end-user is submitted to the Verj.io Runtime Environment when the end-user clicks on a button in the browser. Corresponding Fields are then updated with this data and the On-Click event of the Control representing the button is triggered.

Sometimes however, you want to know about the data the end-user has provided immediately so you can act on it.

For example, you may wish to show or hide additional options when the end-user checks a checkbox, or to update a password-strength indicator.

Enabling a Field Control's Immediate Validation property allows you to add scripts to its On Change event.

When an end-user now changes data in the Field Control's corresponding input box, the Field Control's Validation event is triggered. Once scripts associated with this event have executed successfully, the Field Control's On Change event is triggered.

Steps

Create a Form and add two Fields called myField and myOtherField.

Set myField's Type to Boolean and Display Type to Checkbox.

Drag both Fields onto the Page.

Select the Field Control representing myOtherField and hide it by ticking its Hidden property.

Select the myField Field Control and tick its Immediate Validation property.

Open its On Change event and click the button to create a new Script. Name the script checkMyField.

Add the following to the checkMyField script:

// check whether the field has been ticked
if(fields.myField.value){
  // if it has, show the other field
  fields.myOtherField.fieldControl.show();
}
else{
  // otherwise hide the other field
  fields.myOtherField.fieldControl.hide();
}

Run the Form and test by checking and unchecking myField.

Previous Page Next Page

Current Module

Server-side Events

On Change Event

Steps

Current Module

Part of tracks

Related