Magento – Show hide admin form fields on change Magento 2

adminadminformadminhtmlformsmagento2

I want to show-hide wood type on the basis of change of type field.

Here is my _prepareForm code:-

 $model = $this->_coreRegistry->registry('current_model');

    $isElementDisabled = !$this->_isAllowedAction('Krisha_Visualizer::content');
    $form = $this->_formFactory->create();

    $form->setHtmlIdPrefix('content_');
    $fieldset = $form->addFieldset('base_fieldset', ['legend' => __('Visualizer Content Information')]);
    if ($model->getId()) {
        $fieldset->addField('visualizer_id', 'hidden', ['name' => 'id']);
    }
    $fieldset->addField(
        'name',
        'text',
        [
            'name' => 'post[name]',
            'label' => __('Name'),
            'title' => __('Name'),
            'required' => true,
            'disabled' =>  $isElementDisabled
        ]
    );
    $fieldset->addField(
        'is_active',
        'select',
        [
            'label' => __('Status'),
            'title' => __('Visualizer Status'),
            'name' => 'post[is_active]',
            'required' => true,
            'options' => $model->getAvailableStatuses(),
            'disabled' => $isElementDisabled
        ]
    );
    if (!$model->getId()) {
        $model->setData('is_active', $isElementDisabled ? '0' : '1');
    }

    $fieldset->addField(
        'type',
        'select',
        [
            'label' => __('Type'),
            'title' => __('Visualizer type'),
            'name' => 'post[type]',
            'required' => true,
            'options' => $model->getAvailableTypes(),
            'disabled' => $isElementDisabled
        ]
    );
    if (!$model->getId()) {
        $model->setData('type', $isElementDisabled ? '0' : '1');
    }

    $fieldset->addField(
        'wood_type',
        'select',
        [
            'label' => __('Wood Type'),
            'title' => __('Visualizer Wood type'),
            'name' => 'post[wood_type]',
            'required' => true,
            'options' => $model->getAvailableWoodTypes(),
            'disabled' => $isElementDisabled
        ]
    );
    if (!$model->getId()) {
        $model->setData('wood_type', $isElementDisabled ? '0' : '1');
    }


    $fieldset->addField(
        'small_image',
        'image',
        [
            'title' => __('Small Image'),
            'label' => __('Small Image'),
            'name' => 'post[small_image]',
            'note' => __('Allow image type: jpg, jpeg, gif, png'),
        ]
    );

    $fieldset->addField(
        'main_image',
        'image',
        [
            'title' => __('Main Image'),
            'label' => __('Main Image'),
            'name' => 'post[main_image]',
            'note' => __('Allow image type: jpg, jpeg, gif, png'),
        ]
    );


    $this->_eventManager->dispatch('krisha_visualizer_content_edit_tab_main_prepare_form', ['form' => $form]);
    $form->setValues($model->getData());
    $this->setForm($form);

    return parent::_prepareForm();

Thank you

Best Answer

Overview:

  1. Add JS script that will handle the disabling logic doc: http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/js_init.html
  2. Use jQuery to handle 'type' field's 'change' event

In details:

  1. Add script to your page's .phtml:
<?php

/** @var $block \Magento\<%your_module%>\Block\Adminhtml\<%your_block_name%> */
?>

    {
        "*": {
            "<%your_module%>/js/hideOnChange": {
                "field": "wood_type"
                "dependantOnField": "type"
                "valuesToHideOn": <?php echo $block-><%method_name%>()); ?>
            }
        }
    }

here <%method_name%> is the method of block which will return values of 'type', on which 'wood_type' must be hidden.

  1. $fieldset->addField('type', ..) means that html element with id='type' will be generated. So code in the <%your_module%>/../js/hideOnChange.js file:


define([
    'jquery',
    'underscore'
], function ($, _) {
    'use strict';

    var valuesToHideOn = this.valuesToHideOn,
        field = $('#' + this.field),
        dependantOnField = $('#' + this.dependantOnField);

    dependantOnField.on('change.type', function () {
        _.contains(valuesToHideOn, $(this).val()) ?
            field.addClass('hidden') :
            field.removeClass('hidden');

    });
});
Related Topic