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_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: