1

I am new to Drupal, and I am trying to add some behavior to an existing page within Drupal.

Using the admin UI, I created an model with 2 numbers (num1, num2). I then rendered it into a form.

Now I would like to add a third field, and compute using the client the sum of num1 and num2 into this new field. This needs to be done as you type the numbers.

I wanted to use Javascript to do this, but I really don't know where to start. Is there an example on how to simply add some logic into an exiting screen that is generated by the admin tools?

This is more information. Here are the two fields I have setup as content types

Then, I just add these to fields into a page like so:

Adding the fields into the site

This is how it looks on the site

Again, at this point I would like to just add the sum of both numbers into a 3ed field that is not there yet (of course my project is much more complex, but this is a simple example). So I was going to add field_number3 into my Content type, and I wanted to do some simple Javascript to calculate the field.

I could really use some step by step examples, to just to know where to place a module, and what code to type in the module to only add this behavior to my content.

I am very new to Drupal, and I am using Drupal 8.

3
  • Welcome to Drupal Answers. It's not clear exactly what you're trying to do. Please add examples and screenshots. Also, it's not clear what you mean by "model" - do you mean field? Which part of the admin ui are you referring to? May 5 '17 at 5:13
  • Sorry, I added more details.
    – user80855
    May 5 '17 at 10:15
  • Welcome to Drupal Answers! Adding logic to a page is quite a broad task to explain. We cannot explain from zero how to create a module, how a module can add JavaScript to a node being shown, and how JavaScript code can interact with fields attached to an entity.
    – apaderno
    May 5 '17 at 16:14
3

Attaching custom JS to form

Adding css and javascript to a drupal 8 module

Here's an example of using hook_form_FORM_ID_alter. For this you'll need to make a custom module (conveniently named custommodule in the example below).

Module directory:

custommodule/  
|- js/  
   |-- custommodule.js  
|-- custommodule.info.yml  
|-- custommodule.libraries.yml  
|-- custommodule.module

File contents:

  • custommodule.info.yml

    type: module
    name: Custommodule
    description: 'Custom stuff'
    package: Custom
    core: '8.x'
    
  • custommodule.libraries.yml

    custommodule:
      version: 1.x
      js:
        js/custommodule.js: {}
      dependencies:
        - core/jquery
    
  • custommodule.module

    <?php
    
    use Drupal\Core\Form\FormStateInterface;
    
    /**
     * Implements hook_form_FORM_ID_alter().
     */
    function custommodule_form_node_article_edit_form_alter(&$form, FormStateInterface $form_state, $form_id) {
      $form['#attached']['library'][] = 'custommodule/custommodule';
    }
    
  • custommodule.js

    (function($) {
    
      Drupal.behaviors.myBehavior = {
        attach: function (context, settings) {
    
          var num1 = $("#edit-field-num-1-0-value").value;
          var num2 = $("#edit-field-num-2-0-value").value;
          var result = (Number(num1)+Number(num2));
          $("#edit-field-num-3-0-value").value = result;
        }
      };
    
    })(jQuery);
    

The example uses the default article node type, with 3 integer fields (field_num_1, field_num_2, field_num_3), and works on the article edit form (form id -> node_article_edit_form). The js part is also very basic so all it does is set the third field value once the page loads. Drupal_add_js is deprecated, so we use the $form['#attached']['library'] array to attach a library (defined in the custommodule.libraries.yml file) that contains the JS file (a single libraries.yml file can define more libraries, which can include more js/css files).

1
  • Oh my god. This is awesome. May God bless you!
    – user80855
    May 5 '17 at 16:33
1

This question is very broad and should be easy to find answers to, but if you're new to Drupal I understand it can be hard to know where to look. You'll need to implement hook_form_alter or hook_form_FORM_ID_alter in a custom module to be able to add your JS via drupal_add_js:

MODULE_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'NAME') {
    drupal_add_js(PATH);
  }
}

You will then need to look at Managing JavaScript in Drupal 7 in order to work out how to actually code the JavaScript you need.

2
  • I added more details to make this question more specific. I think what you suggest is probably the correct way. Still, if you can just give me a more step by step approach, so I can try to code it.
    – user80855
    May 5 '17 at 10:15
  • The question is for Drupal 8 not for Drupal 7. May 5 '17 at 10:30

Not the answer you're looking for? Browse other questions tagged or ask your own question.