gform/submission/pre_submission

• Description
• Usage
• Parameters
• Examples
• Accessing the form ID
• Accessing a field value
• Aborting based on a field value
• Since
• Source Code

Description

The gform/submission/pre_submission filter should be used to perform custom actions between a form button (e.g. submit, next, previous) being clicked and the request being posted to the server.

Usage

The gform/submission/pre_submission filter should be used with the gform.utils.addAsyncFilter method.

gform.utils.addAsyncFilter('gform/submission/pre_submission', async (data) => {
	// Perform your custom action here.
	// Use `data.abort = true;` to abort the submission if needed.

	return data;
});

We recommend adding the filter via the gform/theme/scripts_loaded event to ensure the gform.utils.addAsyncFilter method is available at the time you add the filter.

document.addEventListener('gform/theme/scripts_loaded', () => {
	gform.utils.addAsyncFilter('gform/submission/pre_submission', async (data) => {
		// Do something.
		return data;
	});
});

If you only want to add the filter for a specific form, you could use the gform/post_render event, which has access to the ID of the form being rendered, e.g.

document.addEventListener('gform/post_render', (event) => {
    if (event.detail.formId !== 2) {
        return;
    }
	gform.utils.addAsyncFilter('gform/submission/pre_submission', async (data) => {
		// Do something.
		return data;
	});
});

Parameters

• data JavaScript Object
  The data object.
  • form HTMLFormElement
    The form element object.
  • submissionType string
    The type of submission that is being made. Possible values, with their equivalent gform.submission constants, are:
    • submit (gform.submission.SUBMISSION_TYPE_SUBMIT)
      Indicates the form is being submitted, so the entry will be saved if the submission is valid.
    • next (gform.submission.SUBMISSION_TYPE_NEXT)
      Indicates the form is being submitted, so the next page will be displayed if the current page is valid.
    • previous (gform.submission.SUBMISSION_TYPE_PREVIOUS)
      Indicates the form is being submitted, so the previous page will be redisplayed.
    • save-continue (gform.submission.SUBMISSION_TYPE_SAVE_AND_CONTINUE)
      Indicates the user is saving their progress, so the save and continue confirmation with the resume link will be displayed.
    • send-link (gform.submission.SUBMISSION_TYPE_SEND_LINK)
      Indicates the user is submitting an email address via the save and continue confirmation, so the save and continue notification containing the resume link will be sent to the given email address.
  • submissionMethod string
    How the submission will be processed. Possible values, with their equivalent gform.submission constants, are:
    • postback (gform.submission.SUBMISSION_METHOD_POSTBACK)
      Indicates the form will use the default postback submission method.
    • iframe (gform.submission.SUBMISSION_METHOD_IFRAME)
      Indicates the form will use the iframe-based legacy Ajax submission method.
    • ajax (gform.submission.SUBMISSION_METHOD_AJAX)
      Indicates the form will use the new Ajax submission method introduced in 2.9.0, which uses a true Ajax request.
    • custom (gform.submission.SUBMISSION_METHOD_CUSTOM)
      Indicates the form will use a custom submission method. For example, payment add-ons that use custom JavaScript to communicate with the payment gateway before submitting the form will use this.
  • abort boolean
    Indicates if the submission should be aborted. Defaults to false.

Examples

Accessing the form ID

document.addEventListener('gform/theme/scripts_loaded', () => {
	gform.utils.addAsyncFilter('gform/submission/pre_submission', async (data) => {
		const formId = data.form.dataset.formid;
		// Do something with the formId.

		return data;
	});
});

Accessing a field value

document.addEventListener('gform/theme/scripts_loaded', () => {
	gform.utils.addAsyncFilter('gform/submission/pre_submission', async (data) => {
		const email = gform.utils.getNode('.gfield--type-email input', data.form, true);
		console.log('email:', email.value);

		return data;
	});
});

Aborting based on a field value

In this example, the submissions for form ID 1 will be aborted if the value of field ID 5 is not Yes.

document.addEventListener('gform/theme/scripts_loaded', () => {
	gform.utils.addAsyncFilter('gform/submission/pre_submission', async (data) => {
		if (data.submissionType !== gform.submission.SUBMISSION_TYPE_SUBMIT || data.form.dataset.formid !== '1') {
			return data;
		}

		const input = gform.utils.getNode(`#input_${data.form.dataset.formid}_5`, data.form, true);
		if (input?.value !== 'Yes') {
			data.abort = true;
		}

		return data;
	});
});

Since

This filter was added in Gravity Forms v2.9.0

Source Code

This filter is located in submitForm() in /assets/js/src/theme/submission/submission.js.