Description
Fires on multi-page forms with AJAX submission are enabled when changing pages (i.e., going to the next or previous page).
Usage
document.addEventListener('gform_page_loaded', function(event) {
var formId = event.detail.form_id;
var currentPage = event.detail.current_page;
// Code to be triggered when the next/previous page is loaded
});
Parameters
- event Event Object
The JavaScript Event Object. - form_id integer
The ID of the form in use. - current_page integer
The page number of the page being loaded.
Examples
Replace Numbered Months with Named Months in Gravity Forms Dropdown.
document.addEventListener('DOMContentLoaded', replaceMonthInDropdown);
document.addEventListener('gform_page_loaded', replaceMonthInDropdown);
function replaceMonthInDropdown() {
document.querySelectorAll('.gfield_date_dropdown_month select option').forEach(option => {
const monthNames = [
'', 'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'
];
const value = parseInt(option.value, 10);
if (value >= 1 && value <= 12) {
option.textContent = monthNames[value];
}
});
}
Placement
Your code snippet can be placed in an HTML field on your form or in a theme custom JavaScript file.
See also the JavaScript/jQuery section in this article: Where Do I Put This Code?
Source Code
This filter is located in form_display.php