⚡ Slate Form JavaScript Quick Reference

// Wait for the page to finish loading
$(document).ready(function() {
    // Do stuff here
});

Select a form widget by export key:  $('[data-export="export_key"]');

Select the Slate form element: $("form[id^='form_'][id$='_container']");

Select city field of a permanent address block: $("[data-export='sys:permanent'] [name$='_city']");

Get the form/event's GUID: $("form[id^='form_'] input[name=id]").val();

Get a form field's value:

Form.getValue('sys:field:my_field'); //returns GUID for prompt-based fields
Form.getValueArray('sys:field:my_field');
Form.getText('sys:field:my_field'); //returns text for prompt-based fields

Get sys:email's value (this one is special): $("[data-export='sys:email'] input").val(); 

When using @export_key style names in a calculation formula, you can use @export_key_list to get an array of selected options from checkboxes or multi-select fields. For example, you might sum the value of items in a checkbox question: var total = 0; $.each(@fieldkey_list, function(){ total += parseInt(this); }); total;

// Hide the submit button
$(":button.default").hide();

// Display Countdown timer then Submit form
// Change 'timeleft' to control the length of the countdown timer. Default is 5 seconds.
// The page must have an element ID called "countdown" for the countdown to actually display.
// The form will still be submitted without the "countdown" ID on the page.

var timeleft = 1;
var downloadTimer = setInterval(function () {
    document.getElementById("countdown").innerHTML = 'Saving Response ... ' + timeleft + " seconds";
    timeleft -= 1;
    if (timeleft <= 0) {
        clearInterval(downloadTimer);
        document.getElementById("countdown").innerHTML = "Saving ......";
        $(":button.default").trigger('click');
    }
}, 1000);