Show/Hide the field using client script

[ramkutva]

There are 4 Drop Down Fields having 2 values in their list each.(Say - A,B,C,D are 4 drop down fields.'A' having the value as 1,2.'B' having the values as 3 & 4.'C' having the values as 5 & 6. 'D' having the values as 7 & 8.)Initially ,only the first 3 drop down fields will be visible(A,B,C are visible).Based on the values of those 3 drop down values,'D' field will get visible.(The values of those 3 drop down fields should be : A =2;B=4;C=6).Otherwise the 'D' field will get hidden.So.how to write the client script for this scenario???(Note:I tried with one of the field's onChange(),but it wont work properly,as it depends on the change of that field alone).

[w_bouwer]

How about using a UI policy?

Otherwise you could think of adding multiple onChanges, with similar functionality, that check for the state of the other 2 fields, before setting the 4th field. If A is filled, and you change B, your onchange script checks whether B is filled, and if so, whether the other 2 are filled as well. If that is the case you can change the visibility of field D. You should also write a counterpart of this script that removes the visibility when 1 or more of the fields are not filled. That should provide you with the appropriate functionality.

I strongly suggest using a UI policy though, as it is a lot easier 🙂

Wesley

[ramkutva]

Thanks Wesley for your kind suggestion.But,i have written a common functionality onChange() -Client Script,which makes to acheive the result possible.

[w_bouwer]

Would you mind sharing it?

Wesley

[ramkutva]

Here it is,

if(g_sc_form.getControl('A').id != ''){
g_sc_form.getControl('A').onchange = function(event) {
onChange();
};
}
if(g_sc_form.getControl('B').id != ''){
g_sc_form.getControl('B').onchange = function(event) {
onChange();
};
}
if(g_sc_form.getControl('C').id != '') {
g_sc_form.getControl('C').onchange = function(event) {
onChange();
};
}


function onChange() {
if(g_form.getValue('A')==2){
if(g_form.getValue('B') == 2){
if(g_form.getValue('C')==2)){
g_form.setDisplay('D',true);
g_form.setMandatory('D',true);
}
else{
g_form.setDisplay('D',false);
g_form.setMandatory('D',false);
g_form.setValue('D','');
}
}
else{
g_form.setDisplay('D',false);
g_form.setMandatory('D',false);
g_form.setValue('D','');
}
}
else {
g_form.setDisplay('D',false);
g_form.setMandatory('D',false);
g_form.setValue('D','');
}
}