Clear Field Values in Repeatable Sections with Javascript

Repeatable sections are a great way to give your user's the chance to enter multiple records based on the same child object, whether it's for a parent signing up multiple children for a camp or a business owner applying for multiple loans. As a default, repeatable sections retain information from the first object, but what if you want the data cleared each time? With Javascript, you can do this. 

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.

Code to Clear Values in Repeatable Section

function FF_OnAfterRender() {

 BindClickHandlers();

}

function ClearNewRepeatableSection(elem) {

 console.log("Clearing Repeatable Section");

 /* clear out the values from text boxes of newly added section*/

 $(elem).parents('.ff-sec-repeat-wrapper').next().find('input[type="textbox"]').val('');

 $(elem).parents('.ff-sec-repeat-wrapper').next().find('textarea').val('');

 // this line prevents picklists that are hidden from being cleared

 $(elem).parents('.ff-sec-repeat-wrapper').next().find('select[data-ishidden="false"]').val('');

 BindClickHandlers(); 

 return true;

}

function BindClickHandlers(){

 $('.ff-sec-repeat-wrapper a.ff-add').unbind('click');

 $('.ff-sec-repeat-wrapper a.ff-add').bind('click', function () {

 AddToRepeatableSection(this);

 ClearNewRepeatableSection(this);

 });

 $('.ff-sec-repeat-wrapper a.ff-remove').unbind('click');

 $('.ff-sec-repeat-wrapper a.ff-remove').bind('click', function () {

 RemoveFromRepeatableSection(this);

 BindClickHandlers();

 });

}

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. When you navigate to your form, now if you click "+ Add Item", the information will clear!