Form Elements/Slideshow

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);
     });
});