Custom JavaScript Handlers

22 Apr Custom JavaScript Handlers

You can use your own JavaScript-code for some popup 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 popup initialized.
• AfterUpdate. This handler is executed when popup value changed by user. It has incoming parameter element_id.
• BeforeSubmit. This handler is executed before popup submitted.
• AfterSubmitSuccess. This handler is executed when popup successfully submitted.

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

• this.dom_id – this ID is used to access popup DOM elements.
• this.popup_id – popup ID.
• this.popup_slug – popup slug.
• 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.