Increment or Decrement number of Fields Dynamically using Form API and Ajax | Drupal 8

Increment or Decrement number of Fields Dynamically using Form API and Ajax

Submitted by editor on Wed, 03/28/2018 - 14:19
Question

How to Increment or Decrement number of fields dynamically using Ajax Form API ?

In this example, we will use a field to get tags list, the number of tags dynamic.

1. Create a custom form (See the tutorial)

2. Add tags field

$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',
  ];
}

3. Add Callback methods:

  /**
   * 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);
  }
  /**
   * 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'];
  }

Now you can add or remove tag fields dynamically

Comments

RichardRoger (not verified)

Wed, 07/11/2018 - 16:01

In view of the "Add-more button" case accessible in Drupal examples module I have made a shape that can include fields progressively utilizing AJAX, and now I need to add a different Remove catch to every one of those fields so I can evacuate singular fields. Custom Essay Writing Service

tony (not verified)

Fri, 07/13/2018 - 15:55

These are incredible drills and sources which has some genuine good amount of things I have been being asked the several times about many different things which are genuinely a good thing to see like this as do my essay for me have helped me by being here.

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.