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() {
    // After the Form loads, add the new click button event.

function addEventOnAllAddButton() {
    // Get all the Add button and remove the click event
    $('.ff-sec-repeat-wrapper a.ff-add').unbind('click');

    // Get all the Add button and add the new Click
    $('.ff-sec-repeat-wrapper a.ff-add').each(function () {
        $(this).bind('click', function () {
            // Add new section
            // Clean the new section
            // Add the Click event

    // When we remove, we will make sure that the Add event it is added in all the add button again.
    $('.ff-sec-repeat-wrapper a.ff-remove').click(function () {
        // Add the Click event

function cleanFieldsInRepeatableSection(pElement) {
    // Clear out the values from text boxes of newly added section.


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!

Was this article helpful?
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found