0

There are two fields on my paragraph.

  1. A number field
  2. A text field

I want to change the value of the text field when I click on the number field.

Here's my script so far which is only good on the first paragraph because of field_my_content_paragraph_field[0]:

/**
 * @file
 * Javascript behaviors.
 */

(function ($, Drupal) {

  "use strict";

  /**
   * Handle paragraph fields on the node edit form.
   */
  Drupal.behaviors.myBehavior = {

    attach: function (context) {
      $('input[name="field_my_content_paragraph_field[0][subform][field_my_number_integer_field][0][value]"]', context).on('click', function () {
        var myNumberFieldValue = $('input[name="field_my_content_paragraph_field[0][subform][field_my_number_integer_field][0][value]"]').val();
        var myInputTextFieldValue = $('input[name="field_my_content_paragraph_field[0][subform][field_my_input_text_field][0][value]"]');

        switch (myNumberFieldValue) {
          case '1':
            myInputTextFieldValue.val('A');
            break;
          case '2':
            myInputTextFieldValue.val('B');
            break;
          case '3':
            myInputTextFieldValue.val('C');
            break;
        }
      });
    }
  };

})(jQuery, Drupal);

When there is a second paragraph on the node, the field names for the second paragraph are:

name="field_my_content_paragraph_field[1][subform][field_my_number_integer_field][0][value]"

name="field_my_content_paragraph_field[1][subform][field_my_input_text_field][0][value]"

How can I loop through the paragraphs, (or is it the DOM at this point?) so the text field value of the paragraph I'm in is changed on click?

1 Answer 1

0

I need to loop through the paragraphs with an .each() like so:

/**
 * @file
 * Javascript behaviors.
 */

(function ($, Drupal) {

  "use strict";

  /**
   * Handle paragraph fields on the node edit form.
   */
  Drupal.behaviors.myBehavior = {

    attach: function (context) {
      $("input[name$='[subform][field_my_number_integer_field][0][value]']").each(function (i) {

        $('input[name="field_my_content_paragraph_field[' + i + '][subform][field_my_number_integer_field][0][value]"]', context).on('click', function () {

          var myNumberFieldValue = $('input[name="field_my_content_paragraph_field[' + i + '][subform][field_my_number_integer_field][0][value]"]').val();
          var myInputTextFieldValue = $('input[name="field_my_content_paragraph_field[' + i + '][subform][field_my_input_text_field][0][value]"]');

          switch (myNumberFieldValue) {
            case '1':
              myInputTextFieldValue.val('A');
              break;
            case '2':
              myInputTextFieldValue.val('B');
              break;
            case '3':
              myInputTextFieldValue.val('C');
              break;
          }
        });
      });
    }
  };

})(jQuery, Drupal);

Which solves the problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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