This guide explains how to enable or disable JavaScript events (also called "hooks") within a Form module configuration.
WARNING: The JavaScript section is intended for users with programming experience. Entering non-working or incorrect code may compromise the proper functioning of the form or the entire site.
Step-by-Step Procedure
Follow these steps to manage the JavaScript events associated with your Form.
1. Access the JavaScript Section
1. Log in to the dashboard and open the Form management module.
2. Select the Form you want to modify.
3. In the Form editing screen, navigate to the last horizontal tab titled Javascript.
2. Manage Events
In the Javascript section, you will find a list of available events, each represented by an Action Box.
1. Locate the JavaScript event you want to enable or disable (for example, form.beforeSubmit, form.afterSuccess, etc.).
2. Observe the state of the box:
- If the event is Active, the box will be highlighted and you will see a Disable button.
- If the event is Inactive, the box will be greyed out and you will see an Enable button.
3. To Enable the event: click on the Enable button (blue). The box will activate and you can enter JavaScript code in the text area below.
4. To Disable the event: click on the Disable button (red). Any existing JavaScript code will be preserved but not executed.
3. Edit Code (Only if Active)
If you have enabled an event:
1. Scroll down inside the event box.
2. You will find a text area (code editor) enclosed between two lines of grey code:
javascript
$('form').on('event_name', function($form, {data.variable1, data.variable2}) {
// INSERT YOUR JAVASCRIPT CODE HERE
});
3. Insert or modify your custom JavaScript code in the central area.
Note on Event Logic:
- If allowed by the event (
canformat), you can modify form data by returning a modifiedformdataarray. - If allowed by the event (
can_stop), returningreturn false;at the end of the function will block execution of all subsequent events.
4. Save Changes
After enabling or disabling desired events and entering necessary code:
1. Proceed to save the complete Form (usually by clicking on Save or Next until finishing the wizard).
Changes to JavaScript events will take effect after saving.
