0

I used the following script to hide/show 'schedule_date' based on select field option change, and it is working fine. But I want to hide/display the fields without changing the select field options.

define([
    'underscore',
    'uiRegistry',
    'Magento_Ui/js/form/element/select',
    'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select, modal) {
    'use strict';



    return select.extend({

        /**
         * On value change handler.
         *
         * @param {String} value
         */
         onUpdate: function (value) {

            var sdate = uiRegistry.get('index = schedule_date');

            if(value==1){

                sdate.show();
            } else {
                sdate.hide();
            }

            return this._super();
        }
    });
});
0

I have used this code in my admin form and it is working fine on both add and edit case

require([
    'jquery'
], function($){
    jQuery(document).ready(function(){
        //get element by id and hide it on first page load
        jQuery('#schedule_date').hide()
        //check current value of selected id (This will work in edit case)
        if(jQuery('#select_id').val()==1){
            jQuery('#schedule_date').show();
        }
        //Add select box change event and show/hide element accordingly
        jQuery('#select_id').change(function() {
            if(jQuery(this).val() == 1){
                jQuery('#schedule_date').show();
            }
            else{
                jQuery('#schedule_date').hide();
            }
        });        
    });
});

On first it will hide/show schedule_date according to current value of select box, and after update of select box it will hide/show schedule_date accordingly

0

Finally, I found a solution to this requirement. While the select field gets initialized, based on its value it, we can hide/display the corresponding fields.

initialize: function () {
            this._super();
            if (this.customEntry) {
                registry.get(this.name, this.initInput.bind(this));
            }
            if (this.filterBy) {
                this.initFilter();
            }
            var sdate = uiRegistry.get('index = schedule_date');
            if(this.value()==1){
                sdate.show();
            } else {
                sdate.hide();
            }
            return this;
        }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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