Color of a field based on value selection from dropdown

[sandeepgumudelli]

Hi,

Can this be possible to achive?

Background color of the field need to be changed after save based on the value selection from drop down.

Thank you very much for your help in advance.

Regards,
Sandeep

[toms]

Hi,

Place this code to your form’s Javascript section (Options Menu -> Form Properties -> Custom Code -> JS)

Code: Select all

function colorSelect(f) {
  
	var val = $('#' + f).val();
	var bgcolor;
  
	switch(val) {
		case '0':
			bgcolor = 'green';
			break;
		case '1':
			bgcolor = 'red';
			break;
		default:
			bgcolor = 'white';
	}
  
	$('#' + f).css('background-color', bgcolor);
	$('#' + f + ' option').css('background-color', 'white');
	$('#' + f + ' option').css('color', 'black');
  
}

if (nuFormType() == 'edit' && nuCurrentProperties().record_id != '-1') {
   colorSelect('YOUR_FIELD');  // <--------------  Replace with your field ID
}

[sandeepgumudelli]

Thank you very much quick response tom. It is working perfectly with in the form. However, when i tried it in subform nothing happening. any suggestion please?

I tried keeping the code in main form adding subform_id.field_id in thelast line of code. but no luck

[toms]

Is your subform type "Grid" or "Form" ?

subform_type.png

[sandeepgumudelli]

it's grid

[toms]

Try something like this (untested):

Code: Select all

function colorSelect(f) {
  
   var val = $('#' + f).val();
   var bgcolor;
  
   switch(val) {
      case 'OK':
         bgcolor = 'green';
         break;
      case '1':
         bgcolor = 'red';
         break;
      default:
         bgcolor = 'white';
   }
  
   $('#' + f).css('background-color', bgcolor);
   $('#' + f + ' option').css('background-color', 'white');
   $('#' + f + ' option').css('color', 'black');
  
}

if (nuFormType() == 'edit' && nuCurrentProperties().record_id != '-1') {

 $('[id ^=sub_monthly_emp_status][id $=emp_status]').each(function () {
         colorSelect($(this).attr('id'));
     }) 
}	 

[sandeepgumudelli]

just removed on closing } and tried with code by replacing sub_form_id and field_id but no luck.

Code: Select all

function colorSelect(selector) {

   var val = $(selector).val();
   var bgcolor;

   switch (val) {
      case 'ABC':
         bgcolor = 'green';
         break;
      case 'DEF':
         bgcolor = 'red';
         break;
      default:
         bgcolor = 'white';
   }

   $(selector).css('background-color', bgcolor);
   $(selector + ' option').css('background-color', 'white');
   $(selector + ' option').css('color', 'black');

}

if (nuFormType() == 'edit' && nuCurrentProperties().record_id != '-1') {

   $('[id ^=sub_monthly_emp_status][id $=emp_status]').each(function () {
         colorSelect($(this).attr('id'));
      }
  ) }

[toms]

I corrected my post above

[sandeepgumudelli]

Thank you very much Tom. It is working perfect.. Once again thanks.

[toms]

Nice!