Learn More About Javascript Events – WS Form

Javascript Events

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 – The full form configuration data.
  • form_id – The form ID.
  • instance_id – The instance ID of the form on the page.┬áTo learn more about instances, click here.

Example of using the WS Form JavaScript are:

$(document).on('wsf-submit-before-ajax', function(e, form, form_id, instance_id) {

  alert('Event type: ' + e.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(e, form, form_id, instance_id) {

  alert('Form ID ' + form_id + ' was locked!');
});

Events

The available JavaScript events are listed below:

Rendered

This fires when a form has finished rendering.
Event type: wsf-rendered

Before Submit

This fires prior to the form being submitted (when submit button is clicked).
Event type: wsf-submit-before

Before Save

This fires prior to the form being saved (when save button is clicked).
Event type: wsf-submit-before

Before Validation

This fires prior to the form being validated.
Event type: wsf-validate-before

After Validation

This fires when form validation has finished.
Event type: wsf-validate-after

Successful Validation

This fires when validation was successful.
Event type: wsf-validate-success

Failed Validation

This fires when validation failed.
Event type: wsf-validate-fail

Submit

This fires when the form data is about to be processed for submission.
Event type: wsf-submit

Save

This fires when the form data is about to be processed for saving.

Event type: wsf-save

Lock

This fires when the form is locked, just prior to the data being posted on a submit or save.
Event type: wsf-lock

Submit Before Ajax

This fires just before the form data is submitted to the WS Form server side API after the Submit button is clicked.
Event type: wsf-submit-before-ajax

Save Before Ajax

This fires just before the form data is submitted to the WS Form server side API after the Save button is clicked.
Event type: wsf-save-before-ajax

Submit Complete

This fires when the form submit is completed.
Event type: wsf-submit-complete

Save Complete

This fires when the form save is completed.
Event type: wsf-save-complete

Actions Start

This fires when the form actions start to run on the client side.
Event type: wsf-actions-start

Actions Finish

This fires when the form actions finish on the client side.
Event type: wsf-actions-finish

Unlock

This fires when the form is unlocked.
Event type: wsf-unlock

Reset

This fires when a form reset starts (when reset button is clicked).
Event type: wsf-reset-before

Reset Complete

This fires when a form reset completes.
Event type: wsf-reset-complete