Here are some real world situations where a custom JavaScript can be used in a form. The Custom Java code can be added to the form using the Message Control or the custom.js file in a Theme. Refer to Customizing Behavior for more information.

On This Page:

Automatically format SSN

Your form has a text control requiring a Social Security number. The JavaScript below will automatically add the hyphens while the user is entering the SSN. Add SSN to the CSS Class property of the control to enable this JavaScript.

   var CustomEventHandlers = {
       setup: function (el) {
           if (CustomView.hasClass(el, 'SSN')) {
               FEvent.observe(el, 'keydown', this.formatSSN.bindAsObserver(this, el));
               FEvent.observe(el, 'keyup', this.formatSSN.bindAsObserver(this, el));
           }
       },
       formatSSN: function (event, element) {
           if (event.keyCode != 46 && event.keyCode != 8) {
               fldVal = $(element).value;
               var nom = fldVal.charAt(fldVal.length - 1);
               if (isNaN(nom) && nom != "-") {
                   $(element).value = fldVal.substring(0, fldVal.length - 1);
               } else {
                   if ((fldVal.length == 3) || (fldVal.length == 6)) {
                       $(element).value = fldVal + "-";
                   }
                   if (fldVal.length >= 11) {
                       $(element).value = fldVal.substring(0, fldVal.length - 1);
                   }
               }
           }
       }
   }

Correct the case of any text

Your form has a text field or a text area where you would like to automatically correct the case of any text entered in it. For example, if you would like to change "I LOVE TO TYPE IN ALL CAPS" to " I Love To Type In All Caps" while the user is entering it, the JavaScript for this would be written as:

var CustomEventHandlers = {
   setup: function (el) {
       if (CustomView.hasClass(el, 'CorrectCase')) {
           FEvent.observe(el, 'input', this.doCorrectCase.bindAsObserver(this, el));
       }
   },
   doCorrectCase: function (event, element) {
       var val = $(element).value;
       var str = val.toLowerCase();
       var spl = str.split(" ");
       var upstring = "";
       for (var i = 0; i < spl.length; i++) {
           try { //onkeypress will cause an error on first keypress
               upstring += spl[i][0].toUpperCase();
           } catch (err) {}
           upstring += spl[i].substring(1, spl[i].length);
           upstring += " ";
       }
       $(element).value = upstring.substring(0, upstring.length - 1);
   }
}

Add CorrectCase to the CSS Class property of the control to enable this JavaScript.

Limit selection of checkbox options

The JavaScript below will limit the choices to a maximum of three for a checkbox control in a form. Add limit3 to the CSS Class property of that control to enable this JavaScript.

var CustomEventHandlers = {
   setup: function (el) {
       if (CustomView.hasClass(el, 'limit3')) {
           FEvent.observe(el, 'click', this.checkboxlimit.bindAsObserver(this, el));
       }
   },
   checkboxlimit: function (evt, el) {
       var checkgroup = el.childrenWithClassName('input');
       var limit = 3;
       for (var i = 0; i < checkgroup.length; i++) {
           checkgroup[i].onclick = function () {
               var checkedcount = 0
               for (var i = 0; i < checkgroup.length; i++)
               checkedcount += (checkgroup[i].checked) ? 1 : 0
               if (checkedcount > limit) {
                   this.checked = false
                   for (var i = 0; i < checkgroup.length; i++)
                   (checkgroup[i].checked) ? checkgroup[i].disabled = false : checkgroup[i].disabled = true;
               } else {
                   for (var i = 0; i < checkgroup.length; i++)
                   checkgroup[i].disabled = false;
               }
           }
       }
   }
}

Scroll to Top

A Tab control with many fields in each tab, may require a long scroll to switch from one tab to another. You can use a trigger control at the bottom of the first tab with a business rule to navigate the user to the second tab when the trigger is clicked. For example, when you click on the Next Tab trigger control on the Personal Information tab in the Application for Employment form shown a business rule will navigate the user to the Employment History tab.

You can use following JavaScript to force the page to be scrolled to the top after switching to the second tab:

var CustomEventHandlers = {
   setup: function (el) {
       if (CustomView.hasClass(el, 'my-scroll')) {
           FEvent.observe(el, 'click', this.scrollTop.bindAsObserver(this, el));
       }
   },
   scrollTop: function (event, element) {
       document.getElementById("wrapper").scrollIntoView();
   }
}

Add my-scroll to the CSS Class property of the Trigger control which navigates the user to the second tab.

Allow only PDF attachments

You have an upload control in your form and you want to limit the type of documents allowed to PDF only. Use the following JavaScript to validate if the uploaded document has a .PDF extension, and remove it if it doesn’t. An error message "Invalid File "filename" will be removed" will display to

var CustomEventHandlers = {
   uploadEl: null,
   setup: function (el) {
       if (CustomView.hasClass(el, 'onlyPDF')) {
           this.uploadEl = el;
       }
       window.setTimeout('CustomEventHandlers.checkFile()', 3000); // set the initial timer
   },
   checkFile: function () {
       for (var i = 0; i < this.uploadEl.parentNode.childrenWithClassName('f-file-upload-file-name').length; i++) {
           if (!(/^.*\.(pdf|PDF)$/.test(this.uploadEl.parentNode.childrenWithClassName('f-file-upload-file-name')[i].getAttribute('title')))) {
               alert("Invalid file '" + this.uploadEl.parentNode.childrenWithClassName('f-file-upload-file-name')[i].getAttribute('title') + "' will be removed.");
               this.uploadEl.parentNode.childrenWithClassName('f-upload-file-list-delete')[i].click();
           }
       }
       window.setTimeout('CustomEventHandlers.checkFile()', 3000);
   }
}

Add onlyPDF to the Css Class property of your Upload control to enable this JavaScript.

Automatically submit a form

This JavaScript allows the user to bypass a form when it is not required. For example: A user fills in Form A as a new customer registration and is forwarded to Forms B and C to complete the task. It is possible that users that are not registering for the first time, might skip Form B and go directly to form C. You can use following JavaScript to automatically submit a form when a control in the form contains some specific value (say “not-new”) in it.

var CustomEventHandlers = {
   submitEl: null,
   setup: function (el) {
       if (CustomView.hasClass(el, 'conditional-submit')) {
           window.setTimeout('CustomEventHandlers.conditionalSubmit()', 2000);
           this.submitEl = el;
       }
   },
   conditionalSubmit: function () {
       var isValue = "not-new";
       if (this.submitEl.value == isValue) {
           SubmitView.doSubmit("Submit");
       }
   },
}

Add conditional-submit to the CSS Class property of the control whose value is to be compared.

Extra Submit button

You can use the following JavaScript to display an extra submit button at any position on your form. Add a trigger control to your form and set auto-submit in its CSS Class property. Now you can use this trigger control as your Submit button and place it anywhere on your form.

var CustomEventHandlers = {
   submitEl: null,
   setup: function (el) {
       if (CustomView.hasClass(el, 'auto-submit')) {
           FEvent.observe(el, 'click', this.autoSubmit.bindAsObserver(this, el));
       }
   },
   autoSubmit: function (evt, el) {
       window.setTimeout('CustomEventHandlers.doAutoSubmit()', 2000);
   },
   doAutoSubmit: function () {
       SubmitView.doSubmit("Submit");
   }
}

Continue/Finish button on top of the flow

It is useful to have the Continue/Finish buttons at the top and bottom of lengthy forms in a workflow. The JavaScript below will display a Continue/Finish button on the top of your flow. Add a trigger control at the top of your form and set the CSS Class property to extra-submit. Now this trigger control will act as a Continue/Finish button also.

var CustomEventHandlers = {
   setup: function (el) {
       if (CustomView.hasClass(el, 'extra-submit')) {
           FEvent.observe(el, 'click', this.autoSubmit.bindAsObserver(this, el));
       }
   },
   autoSubmit: function (evt, el) {
       FlowView.getFlowButton().onclick();
   }
}

Prevent Session Timeout

The tenant session timeout is set to 30 minutes. One of your forms takes a long time to fill causing idle periods greater than 30 minutes where the user is not filling any forms. Use the following JavaScript to prevent the browser session from timing out.

var sessionInterval = 1000 * 60 * 10; // milliseconds to minutes
var sessionRefreshURL = "/frevvo/web/login";

refreshFrevvoSession = function () {

   // make the request
   var xmlhttp;
   if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
   else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // code for IE6, IE5
   xmlhttp.open("GET", sessionRefreshURL + "?sessionRefresh=" + new Date().getTime(), true);
   xmlhttp.send();

   // set the timer to run again
   setTimeout(refreshFrevvoSession, sessionInterval);
}
setTimeout(refreshFrevvoSession, sessionInterval); // set the initial timer

Auto Control Validation

' Quantity control allows only whole numbers. An error message will display if a number with a decimal point value is entered. Instead of the error message, The forms designer can restrict users from entering a value with a decimal point using this JavaScript::

var CustomEventHandlers = {
        setup: function (el) {
            if (CustomView.hasClass(el, 'onlyDigits')) {
                FEvent.observe(el, 'keydown', this.allowOnlyDigits.bindAsObserver(this, el));
                FEvent.observe(el, 'keyup', this.allowOnlyDigits.bindAsObserver(this, el));
            }
        },
        allowOnlyDigits: function (event, element) {
            fldVal = $(element).value;
            for (var i = 0; i < fldVal.length; i++) {
                var nom = fldVal.charAt(i);
                if (isNaN(nom)) {
                    $(element).value = fldVal.substring(0, i) + fldVal.substring(i + 1, fldVal.length);
                }
            }
        }
    }

Add onlyDigits in the CSS Class property of the Quantity control. Now, whenever a user enters a decimal point, this script will automatically remove it from the field. Similar logic can be used to implement instant validation on other control types as well.

Custom JavaScript Examples