Magento 2 – Change Text Field Value Based on Dropdown Selection

ajaxmagento-2.1magento2

I have made a custom admin form which has a drop-down. Based on the option selected in the dropdown, I want to change the value of the text field below using AJAX.
enter image description here

In the above pic, I want to change value of Order State field based on option selected in Order Status field.

Edit/Tab/Main.php:

    protected function _prepareForm()
    {
        /* @var $model \Iksula\Orderitemstatestatus\Model\BlogPosts */
        $model = $this->_coreRegistry->registry('orderitemstatestatusmapping');

        $isElementDisabled = false;

        /** @var \Magento\Framework\Data\Form $form */
        $form = $this->_formFactory->create();

        $form->setHtmlIdPrefix('page_');

        $fieldset = $form->addFieldset('base_fieldset', ['legend' => __('Item Information')]);

        if ($model->getId()) {
            $fieldset->addField('id', 'hidden', ['name' => 'id']);
        }



        $fieldset->addField(
            'item_state_id',
            'select',
            [
                'label' => __('Item State'),
                'title' => __('Item State'),
                'name' => 'item_state_id',
                'required' => true,
                'options' => $this->grid->getItemState(),
                'disabled' => $isElementDisabled
            ]
        );



        $fieldset->addField(
            'item_status_id',
            'select',
            [
                'label' => __('Item Status'),
                'title' => __('Item Status'),
                'name' => 'item_status_id',
                'required' => true,
                'options' => $this->grid->getItemStatus(),
                'disabled' => $isElementDisabled
            ]
        );



        $orderStatus = $fieldset->addField(
            'order_status',
            'select',
            [
                'label' => __('Order Status'),
                'title' => __('Order Status'),
                'name' => 'order_status',
                'required' => true,
                'options' => $this->grid->getOrderStatus(),
                'disabled' => $isElementDisabled
            ]
        );          

        $fieldset->addField(
            'order_state',
            'text',
            [
                'name' => 'order_state',
                'label' => __('Order State'),
                'title' => __('Order State'),
                'required' => true,
                'disabled' => true,
            ]
        );      $model->setData('order_state', self::getStateValue());  
        if (!$model->getId()) {
            $model->setData('is_active', $isElementDisabled ? '0' : '1');
        }
        $form->setValues($model->getData());
        $this->setForm($form);
        return parent::_prepareForm();
    }

    /**
     * Prepare label for tab
     *
     * @return \Magento\Framework\Phrase
     */
    public function getTabLabel()
    {
        return __('Item Information');
    }

    public function getStateValue(){
        return "value dependent on dropdown select";
    }

    /**
     * Prepare title for tab
     *
     * @return \Magento\Framework\Phrase
     */
    public function getTabTitle()
    {
        return __('Item Information');
    }

    /**
     * {@inheritdoc}
     */
    public function canShowTab()
    {
        return true;
    }

    /**
     * {@inheritdoc}
     */
    public function isHidden()
    {
        return false;
    }

    /**
     * Check permission for passed action
     *
     * @param string $resourceId
     * @return bool
     */
    protected function _isAllowedAction($resourceId)
    {
        return $this->_authorization->isAllowed($resourceId);
    }

    public function getTargetOptionArray(){
        return array(
                    '_self' => "Self",
                    '_blank' => "New Page",
                    );
    }

Best Answer

you can do so, by simply adding javascript. In order to add javascript, you can use this in main.php file like

$field->setAfterElementHtml('<script>
//<![CDATA[

// here goes your custom Javascript

//]]>
</script>');

by using inspect element, check the id of those two fields and use them in your custom js script.

Related Topic