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.


2 Answers 2


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.');

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.

  path/to/js-file.js: {}
    - 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) {
    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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.