This guide is intended for users who wish to customize the behavior of a module by inserting JavaScript code at specific points in the submission process (called "events" or "hooks").
Guide: Enabling or Disabling Advanced JavaScript Events (Hooks)
JavaScript events allow you to execute custom code at specific moments during the user's interaction with the form (for example, before data submission or after a validation error).
CRITICAL WARNING:
The JavaScript event management area is intended for users with programming skills.
> Important Notice (from the system):
> The following settings require knowledge of JavaScript to be used; if the code does not work properly, the entire site functionality could be affected.
Step-by-Step Procedure
Follow these steps to enable, disable, or modify the code associated with a JavaScript event.
1. Access the JavaScript Section
1. Open the form you want to edit.
2. In the form editing panel, navigate to the step titled Javascript.
2. Manage the Desired Event
In the Javascript section you will find a list of all available events. Each event is presented in a separate box.
1. Locate the box for the event you want to manage (for example, form-submit-pre).
2. To enable the event:
- Click the Enable button (blue) located at the top right corner of the box.
- The box will become active.
3. To disable the event (and ignore its internal code):
- Click the Disable button (red).
- The box will return to inactive status.
3. Insert JavaScript Code
If you have enabled an event, you need to insert the code you want to execute.
1. Inside the activated event’s box, you will find a text area (code editor) between two grey code blocks (<code>).
- The upper block shows the function definition (e.g.,
$('form').on('event-id', function($form, {data.variable}) {). - The lower block shows the function closure (
});).
2. Insert your custom JavaScript code inside this text area, making sure it is properly enclosed within the curly braces of the function.
Additional Event Information
Depending on which event you are editing, you might see useful warnings:
- If you see a blue alert (
alert-info):
> By returning a modified form_data array, it is possible to pass this updated array with modified values to subsequent events.
(This means you can modify form data before it is processed.)
- If you see a yellow alert (
alert-warning):
> By setting a return false; at the end of your function, all subsequent events will be blocked.
(This allows you to stop the form submission process.)
4. Save Changes
1. After enabling the event and inserting your code, proceed with saving the form.
2. Click on the save button (usually found at the bottom or footer of the editing page) to apply your changes.
> Note: If there are syntax errors in your JavaScript code, the system may warn you during saving, but your code will still be saved. Always ensure that your inserted code is valid to avoid malfunctions in the form.
