Skip to content

Instantly share code, notes, and snippets.

@danieliser
Last active May 7, 2020 21:39
Show Gist options
  • Save danieliser/c3ac258cefce49b802a74856b081a94a to your computer and use it in GitHub Desktop.
Save danieliser/c3ac258cefce49b802a74856b081a94a 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