Client script not correct

[NMMZ10]

I have two fields 'var3' and 'var4'

What i want is that when the user selects an option on Var3 then on var4 only those related options should appear. 

So basically, theres 2 fields both it various choices, but there are some that when selected the var4 should appear and display specific options

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

    var targetVar = 'select_relevant_option';

    // Define mapping of software to their related options
    var optionMap = {
        'option1': [
            'Activation' ,
            'Deactivation',
            'Modification'
        ],
        'option2': [
            'Barcode',
            'Scan',
            'plugin'
        ],
        'opyion3': [
            'Client',
            'Server',
            'other'
        ],
        'option4': [
            'General',
            'Reporting'
        ]
    };

    // Normalize selected value for case-insensitive matching
    var selectedSW = g_form.getDisplayValue('select_the_software_application');
    if (!selectedSW) {
        g_form.clearOptions(targetVar);
        g_form.setDisplay(targetVar, false);
        return;
    }

    selectedSW = selectedSW.trim().toLowerCase();

    // Determine if the software has mapped options
    var matchedKey = null;
    for (var key in optionMap) {
        if (selectedSW === key) {
            matchedKey = key;
            break;
        }
    }

    // Clear and hide Variable 4 by default
    g_form.clearOptions(targetVar);
    g_form.setDisplay(targetVar, false);

    // If there’s a match, show and populate Variable 4
    if (matchedKey) {
        g_form.setDisplay(targetVar, true);
        g_form.addOption(targetVar, '', '-- Select Option --');

        var opts = optionMap[matchedKey];
        for (var i = 0; i < opts.length; i++) {
            g_form.addOption(targetVar, opts[i], opts[i]);
        }
    }
}

Hopefully i explained it clear enough

Thank you for your help

[Nawal Singh · Accepted solution]

Hi @NMMZ10 ,

Try below code- 

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

    var targetVar = 'select_relevant_option'; // replace with your var4 name exactly

    // Define mapping of software (var3) values to related var4 options
    var optionMap = {
        'option1': ['Activation', 'Deactivation', 'Modification'],
        'option2': ['Barcode', 'Scan', 'Plugin'],
        'option3': ['Client', 'Server', 'Other'],
        'option4': ['General', 'Reporting']
    };

    var selectedSW = g_form.getValue('select_the_software_application'); // var3’s name
    g_form.clearOptions(targetVar);
    g_form.setDisplay(targetVar, false);

    // If nothing selected, just exit
    if (!selectedSW || !optionMap[selectedSW]) {
        return;
    }

    // Show var4 and add options
    g_form.setDisplay(targetVar, true);
    g_form.addOption(targetVar, '', '-- Select Option --');

    var opts = optionMap[selectedSW];
    for (var i = 0; i < opts.length; i++) {
        g_form.addOption(targetVar, opts[i], opts[i]);
    }
}

If you found my response helpful, please mark it as helpful and accept it as the solution.

Thank you
Nawal Singh

[Ankur Bawiskar]

@NMMZ10 

update as this

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

    var var3Field = 'var3'; // your first field name
    var var4Field = 'var4'; // your second field name

    // Map of var3 values to var4 options (keys & values should be exact option values)
    var optionMap = {
        'option1': ['Activation', 'Deactivation', 'Modification'],
        'option2': ['Barcode', 'Scan', 'Plugin'],
        'option3': ['Client', 'Server', 'Other'],
        'option4': ['General', 'Reporting']
    };

    var selectedVar3 = g_form.getValue(var3Field);

    // Clear and hide var4 options initially
    g_form.clearOptions(var4Field);
    g_form.setDisplay(var4Field, false);

    if (!selectedVar3 || !optionMap[selectedVar3]) {
        // Nothing selected or no mapped options, keep var4 hidden
        return;
    }

    // Add a placeholder option
    g_form.addOption(var4Field, '', '-- Select Option --');
    // Add mapped options to var4
    optionMap[selectedVar3].forEach(function(opt) {
        g_form.addOption(var4Field, opt, opt);
    });

    // Show var4 field as options are present
    g_form.setDisplay(var4Field, true);
}

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏

[Ankur Bawiskar]

@NMMZ10 

Thank you for marking my response as helpful.

As per new community feature you can mark multiple responses as correct.

💡 If my response helped, please mark it as correct ✅ as well so that this helps future readers find the solution faster! 🙏