Set Loading State On Repeat Group “Add” Button

This guide will explain how to add a loading state to the repeat group “Add” item button. This will help with a UI indication to users that the repeat group item is being added if custom logic is delaying the item from being added instantly.

image

Add the following JavaScript to your form in a JavaScript field.

// Bind the click event to elements with class .add inside a repeat
$( '.formyoula-Repeat' ).on( 'click', '.add', function( event ) {
  // Get a reference to the button
  var repeat_add_button = $( this );
  // Activate loading state
  repeat_add_button.button( 'loading' );
  // Reset to normal state after 3 seconds
  setTimeout( function() {
    // Reset button original label text
    repeat_add_button.button( 'reset' );
  }, 3000 );
} );

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