Add New Repeat Entry After Specific Field Changes

This guide will explain how to automatically add a new Repeat Entry after specific field changes.

It will auto-add a new repeat entry if the specific field has a value.

Drag and drop your fields inside a Repeat Group and add a JavaScript field outside the Repeat field, as shown below.

Click the pencil icon of the JavaScript field and paste the code.

Please use the code below:

// Time Field IDs to listen for changes
var tracked_field_ids = { 
 '8f87-3591-11b8': false, /* Listen To Field Changes */
 '2c13-bc64-b51f': false, /* Listen To Field Changes */
 'a83c-dc9b-218d': false /* Listen To Field Changes */ 
};

// Repeat Group Field Id
var repeat_group_id = '2e54-3cf8-b190';

// Listen to track field component values changes
// Loop through all the fields to add the listener to each individual field
for ( field_id in tracked_field_ids ) {
  // Listen to field change
  window.formyoula.form_fields[ field_id ].on( 'input:set:success change', function( event ) {
    // Update the fields values to true , to keep track that the field's values has got changed
    tracked_field_ids[ this.get( 'component_id' ) ] = true;
    // Check if all the field's value has changed and trigger ADD Repeat
    trigger_add_repeat();
  } );
}

// Trigger Plus Sign Button click, if all the field's value is set to true
function trigger_add_repeat() {
  // Get all the track field values
  var tracked_field_ids_values_array = Object.values( tracked_field_ids );
  // Check if there is no false value , as that would mean that all the fields value are set
  if ( !tracked_field_ids_values_array.includes( false ) ) {
    // Trigger Add Repeat Entry as all the field's value are set
    setTimeout( () => {
      $( '#component-' + repeat_group_id + ' .add' ).click();
    }, 100 );
  }
}

// Listen to the element:create:success event to reset the tracked_field_ids value to default false value
window.formyoula.form_fields[ repeat_group_id ].on( 'element:create:success', function( event ) {
  // Set all the fields value to default false to ensure that the auto add repeat entry works for the next new repeat entry
  for ( field_id in tracked_field_ids ) {
    // Set field value to false
    tracked_field_ids[ field_id ] = false;
  }
} );

Update field IDs according to your form. Save the changes.

Try the form. Fill in the fields inside the Repeat group, and press enter or click outside the field. It will auto-add a new repeat entry.

For any questions, please get in touch with us - at [email protected] or the Formyoula in-app chat 🙂