Form with Script

This is an example of a form that uses script to customise a feature. It make use of the last three properties of the root component.

In this example, the script fields are used to customise the colour of some components in the form, as well as a counter function.

Create Form

First, create a form with the following content.

Ensure the following properties are set up in the respective input fields.

Component	Property	Setting
html2	HTML	Updates: <span id="updates"></span>
text-input1	Input Type	“Number”
html1	HTML	Reminder is: <span id="reminder"></span>
button-bar1	Buttons	[Reset]reset, [Submit]submit

Add Scripts

Next is to add the scripts into the three script fields. In the root properties, click on the “Edit (X lines)” button below the field. X represents the number of lines of script in the field. If no script has been added, X is 0. Upon clicking on the button, a dialog box will appear. In the dialog box, key in the script and click on the “Save” button. The number of lines entered will be shown on the button of the respective script fields.

Test Scripts

To test the scripts, click on the “More Actions” icon at the top row and select “Run Form” from the drop-down list.

The “Run Form” dialog box will appear. Select “No Workflow” option, since scripts are used.

Click on the “OK” button to run the form. Another tab will appear with the form. The settings in the form is according to the script in the “Before Build Script” field.

The checkbox “Second” in red. Any selection done on the form and the number next to the “Reminder is” field will reduce. These are according to the script in the “After Build Script” field. Make more than five changes in the form and click on the “Submit” button. The results will be submitted with messages according to the script in the “On Action Script” field.