Include pages in your SDK implementation
These code sections will allow users to use Next/Previous buttons to cycle through form sections when using SDK Giving Forms. They also handle the inclusion of the Recurring Prompt.
Methods
These methods handle the interaction logic for cycling through form items, or, as they are referred to here, slides.
Local Variables
Required variables for proper function.
var activeSlide;
var slideElements;
var promptDisplayed = false;
Previous/Next Handler
Arguments
- Direction - Meant to accept either 1 or -1. 1 corresponds to "forward", -1 corresponds to "backward".
function changeSlide(direction) {
// direction: 1 for forward, -1 for backward
if (activeSlide + direction < 0) {
activeSlide = 0;
} else if (activeSlide + direction > slideElements.length - 1) {
activeSlide = slideElements.length - 1;
} else {
slideElements[activeSlide].classList.toggle('section-inactive');
slideElements[activeSlide + direction].classList.toggle('section-inactive');
activeSlide += direction;
}
if (activeSlide == 0) {
//set previous button to gray-out
$('#prev').addClass('button-inactive');
} else if (activeSlide == slideElements.length - 1) { //-2 because of receipt page
//set next button to gray-out
$('#next').addClass('button-inactive');
//say the line bart, say the recurring prompt!
if ($('#recurringFrequency').val() == 'once' && parseFloat($('#paymentAmount').val()) > 99) {
displayRecurringPrompt();
}
} else {
//remove inactive state if present
if ($('#prev').hasClass('button-inactive')) {
$('#prev').removeClass('button-inactive');
} else if ($('#next').hasClass('button-inactive')) {
$('#next').removeClass('button-inactive');
}
}
}
Display Recurring Prompt
Sets up the interface logic for the Recurring Prompt.
//display the recurring prompt section
function displayRecurringPrompt() {
$('#recurring-prompt-yes').click(function () {
$('#recurringFrequency').val('monthly');
var recurringEvent = {
data: {
yesOrNo: true
}
};
$('#once-button').removeClass('frequency-active');
$('#monthly-button').addClass('frequency-active');
updateMonthlyStatusMessage(recurringEvent);
hideRecurringPrompt();
});
$('#recurring-prompt-no').click(function () {
hideRecurringPrompt();
});
if (promptDisplayed == false) {
//render the element, then
$('#recurring-prompt').removeClass('recurring-prompt-hidden');
promptDisplayed = true;
}
}
Hide Recurring Prompt
Hides the Recurring Prompt.
//hide the recurring prompt section
function hideRecurringPrompt() {
$('#recurring-prompt').addClass('recurring-prompt-hidden');
}
DOM Events
To mark a div element as a form element, or slide, assign swap-out-item to its class list.
To assign next and previous buttons, assign ID's prev and next to the desired button elements.
window.addEventListener('DOMContentLoaded', function () {
//gather all elements of class .swap-out-item (aka Slides)
slideElements = $('.swap-out-item');
activeSlide = 0; //corresponds to slideElements[0]
//deactivate unused option for initial state
$('#prev').addClass('button-inactive');
//all but slideElements[0] is visible.
for (var i = 1; i < slideElements.length; i++) {
slideElements[i].classList.toggle('section-inactive');
}
//listeners
document.getElementById('prev').addEventListener('click', function () {
changeSlide(-1);
});
document.getElementById('next').addEventListener('click', function () {
changeSlide(1);
});
});