Passing a PHP value to JavaScript

Question

I am trying to learn more about module development, so far I have a module that attaches Javascript to a certain content type. I am trying to have the data pull from a configuration form field.

SettingsForm.php

  /**
   * {@inheritdoc}
   */
  public function buildForm(array $form, FormStateInterface $form_state): array {
    $form['thisData'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Custom data'),
      '#default_value' => $this->config('myModule.settings')->get('thisData'),
      '#required' => TRUE,
    ];
    return parent::buildForm($form, $form_state);
  }

JavaScript file

(function ($, Drupal, once) {
  Drupal.behaviors.myModule = {
    attach: function (context, settings) {
      $(".myModule", context).Widget({
        text: drupalSettings.myModule.thisData,
        linkText: "Click Here",
      });
    },
  };
})(jQuery, Drupal, once);

This is probably something basic I am missing. I have tried to follow Adding assets (CSS, JS) to a Drupal module via *.libraries.yml / Attaching configurable JavaScript.

I noticed you didn't attach anything to $form['#attached']['drupalSettings'], which is what the documentation says. Could that be it? — mona lisa
– mona lisa, Commented Jul 15, 2024 at 17:43
That said, I don't understand why you don't get the value in JavaScript from the form value directly. The post is missing something about what is the reason for this implementation. — mona lisa
– mona lisa, Commented Jul 15, 2024 at 17:53
The javascript is needed for an external API that is going to grab the value of text: drupalSettings.myModule.thisData, — bdh676
– bdh676, Commented Jul 16, 2024 at 17:21
$config = \Drupal::config("module.settings") was what I was looking for — bdh676
– bdh676, Commented Jul 29, 2024 at 22:02
Welcome to Drupal Answers! Whichever value is passed to JavaScript, the buildForm() method shown in the question is still missing a line setting $form['#attached']['drupalSettings']['myModule']['thisData'] or $form['#attached']['drupalSettings']['myModule']. (That is what the first comment by @monalisa said.) — avpaderno
– avpaderno ♦, Commented Jul 30, 2024 at 7:47

Jaypan · Accepted Answer · 2024-07-30 23:27:02Z

Let's say you have a module named foo with configuration item, foo.settings.remote_domain, and you are trying to pass this value to a JS file attached to a form. This appears to be your situation. This is accomplished by:

Creating a library that contains your JS file, and has a dependency on core/drupalSettings.
Attach this library to the form.
Retrieve the config value in the form build, and attach it to drupalSettings.
Retrieve the value from drupalSettings in your JS and use it as required.

1. Create a library that contains your JS file

foo.libraries.yml

someform:
  js:
    path/to/js/file/in/module.js: {}
  dependencies:
    # The drupalSettings library must be a dependency to pass a value from PHP.
    - core/drupalSettings

2. Attach the library to the form

$form['attached']['libraries'] = ['foo/someform'];

3. Retrieve the config value in the form build, and attach it to drupalSettings

$remote_domain = \Drupal::config('foo.settings')->get('remote_domain');
$form['attached']['drupalSettings']['foo'] = ['remoteDomain' => $remote_domain];

4. Retrieve the value from drupalSettings in your JS and use it as required

(function (Drupal, drupalSettings) {

  Drupal.behaviors.fooForm = {
    attached: function () {
      // Retrieve the value from the drupalSettings object.
      // The value will be stored in the hierarchy you used in the form definition.
      const remoteDomain = drupalSettings.foo.remoteDomain;
    }
  };

})(Drupal, drupalSettings);

Stack Exchange Network

Passing a PHP value to JavaScript

SettingsForm.php

JavaScript file

1 Answer 1

1. Create a library that contains your JS file

2. Attach the library to the form

3. Retrieve the config value in the form build, and attach it to drupalSettings

4. Retrieve the value from drupalSettings in your JS and use it as required

Your Answer

Hot Network Questions

Passing a PHP value to JavaScript

SettingsForm.php

JavaScript file

1 Answer 1

1. Create a library that contains your JS file

2. Attach the library to the form

3. Retrieve the config value in the form build, and attach it to drupalSettings

4. Retrieve the value from drupalSettings in your JS and use it as required

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions