Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save tridoan/d228204b7a962dcf4b5b15a65fc5e90a to your computer and use it in GitHub Desktop.
Save tridoan/d228204b7a962dcf4b5b15a65fc5e90a to your computer and use it in GitHub Desktop.
Caldera Forms doesn't provide any events on the form itself when AJAX is successful (no validation errors). Thus the workaround is to store the form at the last event triggered where it is accessible `cf.ajax.request`, and use it in either the global `cf.submission` or `cf.complete` events.
{
const $ = window.jQuery;
let currentForm, currentFormId;
$(document)
// Before all requests
.on('cf.ajax.request', function (event, obj) {
currentForm = obj.$form;
currentFormId = obj.formIdAttr;
})
// Choose one of the following event methods.
// After all requests, requires checking the response status is complete. Limited ties to form, no ability to check which instance of a form was used if more than one exists on the page.
.on('cf.submission', function (event, obj) {
// Only if status of request is complete|success.
if ("complete" === obj.data.status || "success" === obj.data.status) {
console.log('submission completed', currentForm, currentFormId);
}
})
// Only after complete request (globally, no ties to the form itself).
.on('cf.complete', function () {
console.log('completed', currentForm, currentFormId);
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment