Drupal 8: Actualizar textfield/checkbox mediante ajax en un formulario

Cabecera - Drupal 8: Actualizar textfield/checkbox mediante ajax en un formulario

Drupal 8: Actualizar textfield/checkbox mediante ajax en un formulario

  • Autor: fjavimartin

  • Fecha de Creación: 08/11/2017

  • Categorías:

    • Drupal,
    • Drupal 8,
    • Ajax,
    • Formularios

En este artículo aprovecharemos el formulario de Drupal 8: Mostrar/Ocultar partes de un formulario con ajax para modificar mediante ajax el valor del textfield y el checkbox.

En el artículo citado anteriormente habíamos incluido un botón que nos permitía mostrar/ocultar un fieldset que contenía un textfield y un checkbox a modo de interruptor. Añadiremos un segundo botón que nos permitirá actualizar los valores de estos dos componentes a un valor prefijado en una variable configurada en la clase del formulario.

1. Valores por defecto

Lo primero que haremos será incluir una variable al comienzo de la clase con el valor que cogerá por defecto el textfield y el checkbox junto a los valores que cogerán ambos componentes cuando pulsemos en el botón que actualizará ambos valores.

protected $values = [
    '0' => [
      'textfield_1' => 'Texto 1',
      'checkbox_1' => TRUE,
    ],
    '1' => [
      'textfield_1' => 'Texto 2',
      'checkbox_1' => FALSE,
    ],
  ];

2. Código botón

Incluiremos en nuestro formulario el código del botón encargado de actualizar los valores del textfield y el checkbox.

$form['actions']['button_2'] = [
      '#type' => 'button',
      '#name' => 'ajaxbutton2',
      '#value' => $this->t('Change Values'),
      '#ajax' => [
        'callback' => [$this, 'ajaxButton2'],
      ],
    ];

3. Código Ajax

Nuestro código ajax será muy sencillo:

public function ajaxButton2 (array &$form, FormStateInterface $form_state) {
    $response = new AjaxResponse();
    
    $form['fieldset_1']['textfield_1']['#value'] = $this->values['1']['textfield_1'];
    $form['fieldset_1']['checkbox_1']['#checked'] = ($this->values['1']['checkbox_1']) ? 'checked' : '';
    
    $response->addCommand(new ReplaceCommand('#fieldset-1', render($form['fieldset_1'])));
    
    return $response;
  }

Modificaremos el formulario para incluir el valor deseados y sustituiremos el código ubicado en el selector.

3. Resumen

En múltiples artículos he leído que modificar el formulario desde una función ajax no es la mejor manera de actualizar valores en los componentes de un formulario, pero también es cierto que no he encontrado otra manera de hacerlo y que el comportamiento sea el deseado.

La solución que se propone en la mayoría de foros es modificar el valor por defecto del elemento que queremos actualizar mediante ajax en el método buildForm() de la clase formulario. Para ello utilizaremos el método $form_state→getTriggeringElement() que nos devolverá el elemento que a lanzado el evento ajax y determinar aquí el valor deseado para los elementos que actualizaremos por ajax.

Por el motivo que sea los elementos de un formulario en una llamada de ajax no cogen como valor el especificado en #default_value, sino el determinado por la propiedad #value con el inconveniente que si el usuario actualiza con el teclado el valor de este campo no se verá reflejado en $form_state y será imposible tratar su valor real cuando el formulario sea enviado.

En la sección de referencias encontraréis enlaces a diferentes preguntas realizadas en diversos foros donde se trata este mismo tema.

Si hay alguien que conoce algún método más correcto de realizar esta tarea que no dude en añadirlo a los comentarios.

Disfrutar!!!!

Referencias

https://drupal.stackexchange.com/questions/225770/ajax-callback-on-form-item-generated-by-ajax

https://www.drupal.org/node/1619356

http://cgit.drupalcode.org/sandbox-javier.martin-2911003/tree/drupal_miseries/drupal_miseries/src/Form/HideShowAjaxButton.php?id=3292338b14cf0ea25cdc4e6d0c08bfd89429e6e5

https://drupal.stackexchange.com/questions/188730/how-can-i-implement-ajax-form-submission/188752#188752

https://api.drupal.org/api/drupal/core!core.api.php/group/ajax/8.2.x

https://api.drupal.org/api/drupal/developer%21topics%21forms_api_reference.html

https://api.drupal.org/api/drupal/8.2.x

Todos los Derechos Reservados © 2016

Funciona con Drupal