Articles in this section

Top Javascript Fixes / Recipes

Jessica

August 26, 2019 21:07

Updated

While Formstack for Salesforce out of the box is a wonderful form building tool, sometimes our users need a little more customization. No fear, with Javascript you can modify your form to suit your needs. Below are the top Javascript fixes our customers use.

Adding Javascript in Form Settings

While editing your form, click on the Form Settings button. Here, if you scroll down towards the bottom you can see a section called Javascript Code. Place the code listed below in the white box.

​

Publishing Your Form

Once you have pasted the code, the Form Settings will save automatically. Exit the Form Settings and click "Publish Draft" to publish your form. Your code will now be in place!

Javascript Recipes

1. Limit a multi-select picklist to 4 choices or fewer

By default, mulit-select picklists allow you to select as many options as needed. If you want to limit these options, the code below will work! If you need a different number besides 4, simply replace the 4 with whatever number you need.

function FF_OnAfterRender() {

$("select option).click(function(){

if($("select option").click(function(){

if($("select option: selected", false);

alert('You must select a maximum of 4 options')1;

}

});

2. Set a field to today's date + 7

Let's say you want to automatically set a close date for an Opportunity to today's date plus 7 days. With the below code, you can do just that. If you need a different field than Close Date, change 'Opportunity.CloseDate' to the ID of the field you would like to use. For more information on how we built this code, check out this article from Mozilla Firefox.

If you would like to set the date and time of a date/time field automatically, the below code can do just that. You'll just want to replace the field #Contact\\.testdatetime__c' with the API name of the field you would like to use.

function myFunction() {

var d = new Date();

d.setHours(02);

d.setMinutes(0);

d.setSeconds(0);

d.setMilliseconds(0);

var n = d.toISOString();

$('#Contact\\.testdatetime__c').val(n);

}

function FF_OnAfterRender() {

myFunction()

}

4. Simple phone number field formatting

To force phone number formatting on your form. This formatting will place your phone number fields with a (555)-555-5555 format.

$('#Contact\\.HomePhone').on('change', function() {

var number = $(this).val()

number = number.replace(/(\d{3})(\d{3})(\d{4})/, "($1)$2-$3");

$(this).val(number)

});

5. Prevent Text input but allow numeric input

If you have a field type where you want to ensure your end users do not enter any characters except numbers.

Change #textarea_feedback to match your general text field's Field ID, or populate a general text field with <span id="textarea_feedback"></span>

8. Change "-Select an item-" on a picklist to something else.

Where you see YOURFIELDIDHERE is where you'll input the API name for the field you're working with Right click and inspect the field to get the ID. Where you see YOUR TEXT HERE is where you can enter a custom message in lieu of -Select an Item-

When a form is embedded via an iframe, out of the box the calendar picker does not function properly. The code below fixes that!

$('#ff-ui-datepicker-div').remove();

$('input[vatt="DATE"],input[vatt="DATETIME"]').each(function(){

console.log('DATE/DATETIME fields:'+$(this).attr('id'));

ReRenderCalendar(this);

});

11. Disable Drag and Drop

Used to workaround a current defect with multiple file upload fields on the same page. Currently dragging and dropping a file to upload will cause the file to be uploaded to every upload field on the form.

$(".ff-forms").bind("drop", function(e){

e.preventDefault();

return false;

});

12. Change Datepicker to DD/MM/YY format

Changes the date in the format used most often for our clients in Europe and Australia.

function FF_OnAfterRender(){

jQuery(".hasDatepicker").each(function(){

jQuery(this).datepicker("destroy");

jQuery(this).datepicker({

dateFormat: "dd/mm/yy"

});

});

return true;

}

function FF_OnBeforeSave(){

jQuery(".hasDatepicker").each(function(){

var vText = jQuery(this).val();

var vDates = vText.split('/');

console.log(vDates[0]);

console.log(vDates[1]);

console.log(vDates[2]);

jQuery(this).val(vDates[1] + "/" + vDates[0] + "/" + vDates[2]);

});

return true;

}

12a. Change Datepicker to DD/MM/YY format for Repeatable Sections

function FF_OnAfterRender(){

AddEvent();

jQuery(".hasDatepicker").each(function(){

jQuery(this).datepicker("destroy");

jQuery(this).datepicker({

dateFormat: "dd/mm/yy"

});

});

return true;

}

function AddEvent(){

jQuery(".ff-alink.ff-add").click(function(){

jQuery(".hasDatepicker").each(function(){

jQuery(this).datepicker("destroy");

jQuery(this).datepicker({

dateFormat: "dd/mm/yy" }); });

});

}

function FF_OnBeforeSave(){

jQuery(".hasDatepicker").each(function(){

var vText = jQuery(this).val();

var vDates = vText.split('/');

console.log(vDates[0]);

console.log(vDates[1]);

console.log(vDates[2]);

jQuery(this).val(vDates[1] + "/" + vDates[0] + "/" + vDates[2]);

});

return true;

}

13. Clear values of fields in repeatable sections

By default, repeatable sections retain the information from the first object. With the code below, you can make it so each new record of the repeatable object has blank values.