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.
• form_el – The form element jQuery object
• form_canvas_el – The form canvas element jQuery object

When using the WS Form WooCommerce extension, form_el will refer to the WooCommerce product form and form_canvas_el will refer to the form injected by WS Form.

Example of using the WS Form JavaScript are:

$(document).on('wsf-submit-before-ajax', function(event, form_object, form_id, instance_id, form_el, form_canvas_el) {

  // Debug
  console.log('Event type: ' + event.type + ' fired.');
  console.log('Form ID: ' + form_id);
  console.log('Instance ID: ' + instance_id);

  // Get FormData object from form element
  var form_data = new FormData(form_el[0]);
});

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