Drupal 8/9 Add or Remove the number of fields dynamically using Ajax Form API

lakshmi, Credit to volkotech-solutions Mar 25

In this example, we are using a field to get a list of taxonomy term tags, with the number of tags being dynamic.

TagsForm.php

<?php
//Add tags field.
public function buildForm(array $form, FormStateInterface $form_state, $username = NULL) {
    $form['tags'] = [
      '#type' => 'details',
      '#title' => "Tags",
      '#open' => TRUE,
      '#description' => "The description of the field.",
    ];
    $form['tags']['addtag'] = [
      '#type' => 'submit',
      '#value' => t('Add one more'),
      '#submit' => ['::addOneTag'],
      '#weight' => 100,
      '#ajax' => [
        'callback' => '::updateTagCallback',
        'wrapper' => 'tagfields-wrapper',
        'method' => 'replace',
      ],
    ];
    $form['tags']['remtag'] = [
      '#type' => 'submit',
      '#value' => t('Remove the last'),
      '#submit' => ['::remOneTag'],
      '#weight' => 100,
      '#ajax' => [
        'callback' => '::updateTagCallback',
        'wrapper' => 'tagfields-wrapper',
        'method' => 'replace',
      ],
    ];
    $form['tags']['tag_values'] = [
      '#type' => 'container',
      '#tree' => TRUE,
      '#prefix' => '<div id="tagfields-wrapper">',
      '#suffix' => '</div>',
    ];
    $number_of_tags = $form_state->get('number_of_tags');
    if (empty($number_of_tags)) {
      $number_of_tags = 1;
      $form_state->set('number_of_tags', $number_of_tags);
    }
    for ($i = 0; $i < $number_of_tags; $i++) {
      $form['tags']['tag_values'][$i] = [
        '#type' => 'entity_autocomplete',
        '#target_type' => 'taxonomy_term',
      ];
    }
    return $form;
}

//Add Callback methods.
/**
  * Add or Increment number of tags.
  */
public function addOneTag(array &$form, FormStateInterface $form_state) {
    $number_of_tags = $form_state->get('number_of_tags');
    $form_state->set('number_of_tags', $number_of_tags + 1);
    $form_state->setRebuild(TRUE);
}
/**
  * Remove or Decrement number of tags.
  */
public function remOneTag(array &$form, FormStateInterface $form_state) {
    $number_of_tags = $form_state->get('number_of_tags');
    $form_state->set('number_of_tags', $number_of_tags - 1);
    $form_state->setRebuild(TRUE);
}
/**
  * Return the tag list (Form).
  */
public function updateTagCallback(array &$form, FormStateInterface $form_state) {
    return $form['tags']['tag_values'];
}

21 likes

Add to read list

Comments

Authors

Muna Vijaya Lakshmi

Drupal developer at VolkoTech Solutions

Drupal backend developer having 2+ years of experience in Drupal site development(8 & 9) with Developing Custom modules and Overriding theme concepts.

VolkoTech Solutions

Drupal development company in india

Drupal web development & Consulting company in India.

Must Read

Recent Blogs

Recent Snippets

Must Read

Recent Blogs

Recent Snippets

Must Read

Recent Blogs

Recent Snippets

Drupal 8/9 Add or Remove the number of fields dynamically using Ajax Form API

Comments

Authors

Muna Vijaya Lakshmi

VolkoTech Solutions

Read Next

Altering the User Password Reset Landing Page in Drupal 9/10

Open Link/URL in Same Tab/Window or New Tab in HTML & JS

Programmatically check table exists in database in Drupal 8/9

Creating Super Star Mahesh Babu Potrait with HTML and CSS

How to maintain multiple nodes versions in Linux Ubuntu 22

Device Compatibility & Responsive Design: Testing Guide & Best Practice

Building Responsive Web Designs with CSS Media Queries

Standards for creating a user-friendly navigation system

List of standards for better UX(User Experience)

Using CSS Grid and Flexbox to Create Responsive Web Pages

Must Read

Recent Blogs

Recent Snippets

Must Read

Recent Blogs

Recent Snippets

Must Read

Recent Blogs

Recent Snippets

Drupal 8/9 Add or Remove the number of fields dynamically using Ajax Form API

Share

Comments

Authors

Read Next