How to hide variable using catalog client script

[zeerodger27]

I have "computer" variable which is select box in that I have 3 options 1)None (which is coming from by selecting the include none check box) 2)laptop 3) desktop and I have "device" variable which is select box in that I have 4 options 1) lenovo 2) dell 3) asus 4) samsung

1) If the computer variable is none then device variable should not be visible
2) If the computer variable is laptop then device variable should show lenovo & dell options in the dropdown
3) If the computer variable is desktop then device variable should show asus & samsung options in the dropdown

I have tried with the below on change client script but it is not working

function onChange(control, oldValue, newValue, isLoading) {
if (isLoading || newValue === '') {
return;
}

var deviceTypeField = g_form.getControl('device');

g_form.clearOptions(deviceTypeField);

if (newValue === 'laptop') {
g_form.addOption(deviceTypeField, 'lenovo', 'Lenovo');
g_form.addOption(deviceTypeField, 'dell', 'Dell');
} else if (newValue === 'desktop') {
g_form.addOption(deviceTypeField, 'asus', 'Asus');
g_form.addOption(deviceTypeField, 'samsung', 'Samsung');
} else {
g_form.setVisible(deviceTypeField, false); // I have written this for none
} 
}

[Yashsvi]

Hi @zeerodger27,

please check below script:

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue === '') return;

    var g_form = g_form || window.g_form;
    
    if (newValue === 'none') {
        g_form.setVisible('device', false);
    } else {
        g_form.setVisible('device', true);
        g_form.clearOptions('device');
        if (newValue === 'laptop') {
            g_form.addOption('device', 'lenovo', 'Lenovo');
            g_form.addOption('device', 'dell', 'Dell');
        } else if (newValue === 'desktop') {
            g_form.addOption('device', 'asus', 'Asus');
            g_form.addOption('device', 'samsung', 'Samsung');
        }
    }
}

Thank you, please make helpful if you accept the solution. 

[zeerodger27]

Hi @Yashsvi ,

the device variable is not getting hide when the computer variable is none
and can you please explain the below line
var g_form = g_form || window.g_form;

[swathisarang98 · Accepted solution]

Hi @zeerodger27 ,

I have tried the your code in my pdi it needs little bit of modification,

Please find the corrected code :

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        g_form.setVisible('device', false); // to hide device while onload
        return;
    }


    if (newValue == 'laptop') {
        g_form.setVisible('device', true);
        g_form.addOption('device', 'lenovo', 'Lenovo');
        g_form.addOption('device', 'dell', 'Dell');
		g_form.removeOption('device','asus');
		g_form.removeOption('device','samsung');
    } else if (newValue == 'desktop') {
        g_form.setVisible('device', true);
        g_form.addOption('device', 'asus', 'Asus');
        g_form.addOption('device', 'samsung', 'Samsung');
		g_form.removeOption('device', 'lenovo');
        g_form.removeOption('device', 'dell');
    } else {
        g_form.setVisible('device', false); // I have written this for none
    }

}

Please mark this comment as Correct Answer/Helpful if it helped you.

Regards,

Swathi Sarang