Adding action to textarea

Question

I am hoping that this enquiry will be a easy one for someone to help shed some light on... I know that in order to create a textarea in Drupal 8 the following code can be used (e.g. render array)

$the_textarea=array(
        '#type' => 'textarea',
        '#required' => FALSE,
        '#ajax' => array (
            // Function to call when event on form element triggered.
            'callback' => array($this->componentCallbackObject,$this->componentCallbackFunction),
            'event' => $this->componentEvent,
        ),
    );

In the above code, a callback is defined using ajax ... this has the result of the code requiring the client to communicate with the server, which then sends back instructions to the client side using ajax... Is there away to get a component to execute some javascript (where the javascript would be loaded when the page in question, first loads) and when either the upkey, downkey or onchange event is triggered for the textarea the javascript, which would already be available to the client would be executed.

The main point here is that the client wouldn't need to communicate with the server, just with the javascript which is loaded when the page first loads e.g. without having to callback to the server and then wait for the server to send back the information.

Answer 1

The technique you need is easy, the full details can be complicated (depending on exactly what you want the JS to do). You can attach a custom JavaScript file from without your module in three steps:

1. Create the JS file.
2. Define a library.
3. Attach the library to the form element.

The JavaScript should typically live in a folder named js at the root of your module: js/my-great-jscode.js.

To create your library add a [module_name].libraries.yml file to the root of your custom module. In there define the library:

my-library:
  version: 1.x
  js:
    js/my-great-jscode.js: {}

Then to attach the code to your form element you add #attached => library to the render array.

$the_textarea=array(
  '#type' => 'textarea',
  '#required' => FALSE,
  '#ajax' => array (
  // Function to call when event on form element triggered.
  'callback' => array($this->componentCallbackObject,$this->componentCallbackFunction),
  'event' => $this->componentEvent,
  ),
  '#attached' => [
    'library' => [
      'my-module/my-library',
    ],
  ],
);

There is more detail in Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 module on Drupal.org

Answer 2

The main point here is that the client wouldn't need to communicate with the server, just with the javascript which is loaded when the page first loads e.g. without having to callback to the server and then wait for the server to send back the information.

That is not AJAx, that's just plain javascript. So you shouldn't use the #ajax system for if that's not what you want. Keep in mind that using ajax is a must if you need to change the form, because Drupal will not accept form elements that it didn't provide.

There's also the #states API, see https://randyfay.com/states. It allows some basic client-side changes, like making form elements visible based on another element/selection, showing them as required (note that you still need to do server-side validation yourself too) and so on.

And if that's not enough, then sure, you can always write your own JS, add that using libraries.yml and #attached and do whatever you want there. You might also need to look into using drupalSettings to dynamically pass configuration (like the name of your form element if it is not hardcoded) to your JS, so it knows what to do.