0

I have added a paragraph where I want to use a radio button to conditionally display text fields from that same paragraph.

My radio values are:

  • Select discount in amount -> if checked, then textfield field_discount_in_currency needs to be shown
  • Select discount in percentage -> if checked, then textfield field_discount_in_percentage needs to be shown

I tried below code but it seems not to be working. Can anyone suggest how I can achieve this?

/**
* Implements hook_field_widget_WIDGET_TYPE_form_alter().
*/
function mymodulenmae_field_widget_paragraphs_form_alter(&$element, \Drupal\Core\Form\FormStateInterface $form_state, $context) {
echo "sdfsdf";
/** @var \Drupal\field\Entity\FieldConfig $field_definition */
$field_definition = $context['items']->getFieldDefinition();
$paragraph_entity_reference_field_name = $field_definition->getName();

if ($paragraph_entity_reference_field_name == 'field_region_list') {
/** @see \Drupal\paragraphs\Plugin\Field\FieldWidget\ParagraphsWidget::formElement() */
$widget_state = \Drupal\Core\Field\WidgetBase::getWidgetState($element['#field_parents'], 
$paragraph_entity_reference_field_name, $form_state);

/** @var \Drupal\paragraphs\Entity\Paragraph $paragraph */
$paragraph_instance = $widget_state['paragraphs'][$element['#delta']]['entity'];
$paragraph_type = $paragraph_instance->bundle();

// Determine which paragraph type is being embedded.
if ($paragraph_type == 'discount') {
  $dependee_field_name = 'field_discount_type';
  $selector = sprintf('input[name="%s[%d][subform][%s]"]', 
$paragraph_entity_reference_field_name, $element['#delta'], $dependee_field_name);

  // Dependent fields.
  $element['subform']['field_discount_in_currency']['#states'] = [
    'visible' => [
      $selector => ['value' => 'Select discount in amount'],
   ],
  ];

  $element['subform']['field_discount_in_percentage']['#states'] = [
    'visible' => [
      $selector => ['value' => 'Select discount in percentage'],
    ],
  ];
  }
}
}

HTML of input radio:

 <div class="field--type-list-string field--name-field-discount-type field--widget-options-buttons js-form-wrapper form-wrapper" data-drupal-selector="edit-field-region-list-0-subform-field-discount-type-wrapper" id="edit-field-region-list-0-subform-field-discount-type-wrapper"><fieldset data-drupal-selector="edit-field-region-list-0-subform-field-discount-type" id="edit-field-region-list-0-subform-field-discount-type--wrapper" class="fieldgroup form-composite required js-form-item form-item js-form-wrapper form-wrapper" required="required" aria-required="true">
  <legend>
  <span class="fieldset-legend js-form-required form-required">Discount type</span>
 </legend>
 <div class="fieldset-wrapper">
        <div id="edit-field-region-list-0-subform-field-discount-type" class="form-radios"><div class="js-form-item form-item js-form-type-radio form-type-radio js-form-item-field-region-list-0-subform-field-discount-type form-item-field-region-list-0-subform-field-discount-type">
    <input data-drupal-selector="edit-field-region-list-0-subform-field-discount-type-select-discount-in-amount" type="radio" id="edit-field-region-list-0-subform-field-discount-type-select-discount-in-amount" name="field_region_list[0][subform][field_discount_type]" value="Select discount in amount" class="form-radio">

    <label for="edit-field-region-list-0-subform-field-discount-type-select-discount-in-amount" class="option">Select discount in amount</label>
   </div>
 <div class="js-form-item form-item js-form-type-radio form-type-radio js-form-item-field-region-list-0-subform-field-discount-type form-item-field-region-list-0-subform-field-discount-type">
    <input data-drupal-selector="edit-field-region-list-0-subform-field-discount-type-select-discount-in-percentage" type="radio" id="edit-field-region-list-0-subform-field-discount-type-select-discount-in-percentage" name="field_region_list[0][subform][field_discount_type]" value="Select discount in percentage" checked="checked" class="form-radio">

    <label for="edit-field-region-list-0-subform-field-discount-type-select-discount-in-percentage" class="option">Select discount in percentage</label>
  </div>
</div>

      </div>
3
  • Have you confirmed that the selector referred to by $selector is correct? And for this: `['value' => 'Select discount in amount'] are you sure that is the value of the item, and not the label? They can sometimes be different.
    – Jaypan
    Dec 21, 2021 at 16:57
  • @Jaypan I have added the input radio html. I am not sure if this is right for $selector but yes `['value' => 'Select discount in amount'] is right.
    – user106539
    Dec 22, 2021 at 5:55
  • I used select field and then created a new content and added same fields and it work fine for me
    – user106539
    Dec 22, 2021 at 9:07

0

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.