WS Form fires a number of different events during the lifecycle of a form. You can use these to run your own javascript when the event fires.
All WS Form events are passed the following parameters:
- event – Event object
- form_object – The form object (Form configuration).
- form_id – The form ID.
- instance_id – The instance ID of the form on the page. This is an integer that begins with 1. To learn more about instances, click here.
Example of using the WS Form JavaScript are:
$(document).on('wsf-submit-before-ajax', function(event, form_object, form_id, instance_id) { alert('Event type: ' + event.type + " fired.nForm ID " + form_id + ', instance ID ' + instance_id); // Get jQuery form object var form_obj = $('#ws-form-' + instance_id); // Get form DOM element var form_element = form_obj[0]; // Get FormData object from form element var form_data = new FormData(form_element); });
… where wsf-submit-before-ajax
is the event type. In this example, the wsf-submit-before-ajax
event fires immediately before we push the form data to our server side API.
Another example showing how to handle a lock event on the form. The form is locked when the form submit button is clicked to help prevent double clicks.
$(document).on('wsf-lock', function(event, form_object, form_id, instance_id) { alert('Form ID ' + form_id + ' was locked!'); });
Events
The JavaScript events fired by WS Form at a document
level are chronologically listed below:
Name | Description | Trigger |
---|---|---|
Rendered | This fires when a form has finished rendering. | wsf-rendered |
Submit Before | This fires prior to the form being submitted (when submit button is clicked). | wsf-submit-before |
Save Before | This fires prior to the form being saved (when save button is clicked). | wsf-submit-before |
Validation Before | This fires prior to the form being validated. | wsf-validate-before |
Validation After | This fires when form validation has finished. | wsf-validate-after |
Validation Success | This fires when validation was successful. | wsf-validate-success |
Validation Fail | This fires when validation failed. | wsf-validate-fail |
Submit | This fires when the form data is about to be processed for submission. | wsf-submit |
Save | This fires when the form data is about to be processed for saving. | wsf-save |
Lock | This fires when the form is locked, just prior to the data being posted on a submit or save. | wsf-lock |
Submit Ajax Before | This fires just before the form data is submitted to the WS Form server side API after the Submit button is clicked. | wsf-submit-before-ajax |
Save Ajax Before | This fires just before the form data is submitted to the WS Form server side API after the Save button is clicked. | wsf-save-before-ajax |
Complete | This fires when the form submit or save is completed. | wsf-complete |
Submit Complete | This fires when the form submit is completed. | wsf-submit-complete |
Save Complete | This fires when the form save is completed. | wsf-save-complete |
Success | This fires when the form submit or save is successful. | wsf-success |
Submit Success | This fires when the form submit is successful. | wsf-submit-success |
Save Success | This fires when the form save is successful. | wsf-save-success |
Error | This fires when the form submit or save encounters an error. | wsf-error |
Submit Error | This fires when the form submit encounters an error. | wsf-submit-error |
Save Error | This fires when the form save encounters an error. | wsf-save-error |
Actions Start | This fires when the form actions start to run on the client side. | wsf-actions-start |
Actions Finish | This fires when the form actions finish on the client side. | wsf-actions-finish |
Unlock | This fires when the form is unlocked. | wsf-unlock |
Reset Before | This fires when a form reset starts (when reset button is clicked). | wsf-reset-before |
Reset Complete | This fires when a form reset completes. | wsf-reset-complete |
Clear Before | This fires when a form clear starts (when clear button is clicked). | wsf-clear-before |
Clear Complete | This fires when a form clear completes. | wsf-clear-complete |