Custom JavaScript Handlers

13 Apr Custom JavaScript Handlers

You can use your own JavaScript-code for some form events. It doesn’t mean that native JavaScript handlers are replaced by yours. It means that your JavaScript-code is executed together with native handlers.

To enable Custom JavaScript Handlers, make sure that you activated appropriate module. Go to Advanced Settings page and turn on Activate Custom JavaScript Handlers module. Then go to form editor, click button on Top Toolbar, select Advanced tab and click Custom JavaScript Handlers. There you can enable certain handler and put JS-code.

At that moment you can add JavaScript-code to the following events:

• AfterInit. This handler is executed when form initialized.
• AfterUpdate. This handler is executed when form value changed by user. It has incoming parameter element_id.
• BeforeSubmit. This handler is executed before form submitted.
• AfterSubmitSuccess. This handler is executed when form successfully submitted.

The following variables and functions might be useful in your JavaScript-code:

• this.dom_id – this ID is used to access form DOM elements.
• this.form_id – form ID.
• this.user_data – object, that can be used to store your data (to send data between handlers).
• this.get_field_value(ELEMENT_ID) – get the value of certain input field. Replace ELEMENT_ID by real field ID taken from Advanced tab on field properties window.
• this.set_field_value(ELEMENT_ID, value) – set the value of certain input field. Replace ELEMENT_ID by real field ID taken from Advanced tab on field properties window.

Do not use <script>...</script> tags inside (just put regular JavaScript-code) and make sure your JavaScript-code doesn’t have any syntax errors.