How can I display a message when "add another item" on an Inline Entity Form Multiple field is clicked?

Question

In Drupal 8 inline entity form is there a "form_alter" or "submit handler" or some type of ajax callback for when a user clicks "add another item"?

What I would like to do is display a message to the user when they click "add another item" on a Inline Entity Form Multiple field.

Struggling to find the right path.

Answer 1

The IEF Api has a hook for performing alterations before the entity form is included on the IEF widget. You can add your message after checking you're on the right form/entity.

/**
 * Perform alterations before an entity form is included in the IEF widget.
 *
 * @param $entity_form
 *   Nested array of form elements that comprise the entity form.
 * @param $form_state
 *   The form state of the parent form.
 */
function hook_inline_entity_form_entity_form_alter(&$entity_form, &$form_state) {
  if ($entity_form['#entity_type'] == 'commerce_line_item') {
    $entity_form['quantity']['#description'] = t('New quantity description.');
  }
}

Answer 2

You can do this using JS. Add a click event listener on the Add item button. When the button is clicked you set a message.

Something like this should work:

$('.add-item-class').on('click', function () {
  const messages = new Drupal.Message();
  messages.add('You clicked the add item button!');
});

Make sure you have Drupal available in your JS file by adding it as a dependency in your libraries file.

js:
  path/to/js-file.js: {}
  dependencies:
    - core/drupal
    - core/jquery

Please note that the Drupal.Message() was first introduced in Drupal 8.7, so if you use an older version it would not work.

Another possible solution is to create a route that sets the message, using \Drupal::messenger()->addMessage('').

Your controller will do like this:

\Drupal::messenger()->addMessage($this->t('Your added an item!'));
$messages = ['#type' => 'status_messages'];
return new JsonResponse(['message' => Json::encode(\Drupal::service('renderer')->renderRoot($messages))]);

And your JS file like this:

$('.add-item-class').on('click', function () {
  $.get('/path/to/your-route', function (response) {
    $(context).find('.region-highlighted').prepend(JSON.parse(response.message));
    setTimeout(function () {
      $(context).find('.region-highlighted .messages').remove();
    }, 5000);
  });
});

This appends the message to the highlighted region and removes it after 5 seconds. You can place it anywhere you want.