1. Support
  2. Data Integration

Client-side events

You can access client-side events in order to hook into the lifecycle of a form in the browser. All events can be handled by establishing an event handler using Cognito.on('<event-type>', <event-handler>). Some form events can be prevented by calling the preventDefault() method from an event handler.

Events

beforeSubmit

Raised after the user clicks the “Submit” button, but before the form is submitted to the Cognito Forms servers. You may catch this event to perform custom validation, or display a message to the user before the form is submitted.

This event is preventable.

Data

Property Type Description
hasErrors Boolean Indicates whether or not there is a validation message being displayed.
entry Object An object representing the entry to be submitted.

afterSubmit

Raised after the form is submitted but before the confirmation page is displayed.

Data

Property Type Description
entry Object An object representing the entry to be submitted.
documents Array An array of documents included on the confirmation page.
documents[i].link String A URL that can be used to download the document.
documents[i].title String The title of the document.
documents[i].type String The type of document (e.g. adobe-pdf, ms-word, html)

beforeNavigate

Raised when the user attempts to move to another page in the form.

This event is preventable.

Data

Property Type Description
direction String What direction the user is navigating: forward or backward.
sourcePage Object The page that the user is currently on.
sourcePage.number Number The current page number.
sourcePage.name String The current page name.
sourcePage.title String The current page title.
destinationPage Object The page to which the user is navigating.
destinationPage.number Number The destination page number.
destinationPage.name String The destination page name.
destinationPage.title String The destination page title.

afterNavigate

Raised once a page navigation has completed.

Data

Property Type Description
direction String What direction the user navigated: forward or backward.
sourcePage Object The page that the user is currently on.
sourcePage.number Number The current page number.
sourcePage.name String The current page name.
sourcePage.title String The current page title.
destinationPage Object The page to which the user is navigating.
destinationPage.number Number The destination page number.
destinationPage.name String The destination page name.
destinationPage.title String The destination page title.

uploadFile

Raised every time a user uploads a file to the form. You may catch this event in order to display additional data about the file or a confirmation message.

Data

Property Type Description
file Object The file which was uploaded.
file.name String The name of the uploaded file.
file.id String The Cognito Forms assigned id of the file.
file.size Number The file size in bytes.

Example

The examples below capture the beforeSubmit event and prevent the entry submission if the provided first name is “Bob”.

Seamless embed

<script src="https://cognitoforms.com/f/seamless.js" data-key="beDsdRSO50OQKDy-LoN0Qw" data-form="85"></script>
<script>
  Cognito.on('beforeSubmit', function(event) {
    if (event.data.entry.Name.First === 'Bob')
      event.preventDefault();
  });
</script>

Iframe embed

<iframe src="https://cognitoforms.com/f/beDsdRSO50OQKDy-LoN0Qw/85" style="border:0;width:100%;" height="3017">

</iframe>

<script>
  Cognito.on('beforeSubmit', function(event) {
    if (event.data.entry.Name.First === 'Bob')
      event.preventDefault();
  });
</script>

Multiple forms

To access client-side events for multiple forms seamlessly embedded on a single page, you must manually mount the forms to set up separate events.

<div id="form1">

</div>

<div id="form2">

</div>

<script src="https://cognitoforms.com/f/seamless.js"></script>
<script>
  const api = Cognito('<value from data-key attribute>');
  const form1 = api.mount('<value from data-form attribute>', '#form1');
  form1.on('beforeSubmit', function(e) {
     console.log('beforeSubmit form1');
  });
  const form2 = api.mount('<value from data-form attribute>', '#form2');
  form2.on('beforeSubmit', function(e) {
     console.log('beforeSubmit form1');
  });
</script>

Please note that <value from data-key attribute>​ and <value from data-form attribute>​ refer to the attributes on the script tag from the Seamless embed code.

Advanced usage

For all events it is possible to return a Promise from the event handler to delay execution of the normal behavior for that event. For example, you could perform an asynchronous web request to validate an entry during submission, then allow or prevent the submission based on the result of that request.

Cognito.on('beforeSubmit', function(event) {
  return performRemoteValidation(event.data.entry).then(function(validationResult) {
    if (!validationResult.isValid)
      event.preventDefault();
  });
});
Support