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.

Keira Buckley (not verified)

Thu, 12/06/2018 - 10:47

When you use latest ajax version so you will not find any type of error in your programming. 

<a href="https://www.nationalaccidentsupportline.co.uk/motorbike-accident-claim">Motor bike accident injury</a>

R HILDAN M (not verified)

Fri, 12/14/2018 - 16:59

link 3 agen plat high tensile sm490 yb agen plat high tensile sm490ya agen plat kapal agen plat stainless ss304 agen plat stainless ss310 agen plat stainless ss316 agen plat sumihard agen round bar besi aisi 440s45c agen round bar scm440 agen steel rail undangan pernikahan undangan pernikahan Distributor plat besi hitam Distributor plat besi hitam undangan pernikahan bentuk tas Agen besi beton interworld steel is undangan pernikahan modern Toko Plat Bordes Kembang Distributor Pipa Besi baja Schedule Sch 40 Distributor besi cnp baja Harga plat besi hitam Harga plat besi hitam undangan pernikahan biru Agen besi beton gunung garuda undangan pernikahan biasa Toko Plat Besi Hitam Supplier Pipa Besi baja Schedule Sch 40 Harga besi cnp baja www.pusatbesibaja.co.id Jual plat besi hitam Jual plat besi hitam undangan pernikahan biasa sewa villa bukit danau Agen besi beton delcoprima undangan pernikahan bahasa inggris islam Toko Plat Kapal Bki Krakatau Steel Agen Pipa Besi baja Schedule Sch 40 Jual besi cnp baja www.pusatbesibaja.com Supplier plat besi hitam Supplier plat besi hitam undangan pernikahan bagus Agen besi beton cakra steel cs undangan pernikahan cantik elegan Toko Jual Besi Siku Baja Toko Pipa Besi baja Schedule Sch 40 Supplier besi cnp baja Toko plat besi hitam Toko plat besi hitam undangan pernikahan bermanfaat Agen besi beton bjku undangan pernikahan akrilik Toko Besi Unp Baja Profil Kanal Jual Pipa Besi baja Schedule Sch 40 Toko besi cnp baja Supplier besi beton Sni Ulir Polos polos ulir Agen plat besi hitam Agen plat besi hitam undangan pernikahan akrilik Agen besi beton Sni Ulir Polos undangan pernikahan bentuk dompet Toko Besi Cnp Profil Baja Gording Harga Pipa Besi baja Schedule Sch 40 Agen besi cnp baja Supplier besi beton sii Pabrik plat besi hitam Pabrik plat besi hitam undangan pernikahan anti mainstream Agen besi beton ais undangan pernikahan coklat Toko Besi Hollow Pabrik Pipa Besi baja Schedule Sch 40 Pabrik besi cnp baja Supplier besi beton psi Ulir Polos Toko besi cnp baja Toko besi cnp baja undangan pernikahan coklat undangan pernikahan biasa Agen Besi Pipa Baja Schedule 80 Jual Stainless steel Toko besi beton krakatau steel Agen besi cnp baja Agen besi cnp baja undangan pernikahan cantik dan murah Agen besi beton Sni Ulir Polos polos ulir undangan pernikahan bunga Agen Besi Pipa Baja Schedule 40 Harga Stainless steel Toko besi beton jcac Pabrik besi cnp baja Pabrik besi cnp baja undangan pernikahan casual Agen besi beton sii undangan pernikahan artis Agen Pipa Besi Hitam Medium Pabrik Stainless steel Toko besi beton interworld steel is Distributor besi h beam baja Distributor besi h beam baja undangan pernikahan contoh Agen besi beton psi Ulir Polos undangan pernikahan modern

Add new comment