Change the css class of a calculated field based on value [RESOLVED]

Hi,
does anybody know a way (javascript or php) to change the css class of a calculated field based on value. For example: a users enters numbers in 2 fields.

  • If the result is > 10, class should become .larger
  • if the result is <10, class should become .lower
  • if the result is =10, class should become .equals

Thx for your input.

Hello Erik. It looks like you can do this with the gform_calculation_result filter.

I created a quick form. You can download the json from here:
[SITE REMOVED]

Save that to your computer and then go to Forms > Import/Export > Import Forms to import that into your site. The jQuery was added to a field in the form. Once imported, you will need to change the form ID in the script from 490 to whatever your form ID is once imported (490 appears in the script multiple times, so be sure you change them all.)

I do not have any of those CSS classes defined, so there is no visible change in the form, but you can watch the source in the developer console and see the classes being added and removed as you change the inputs. Here’s a quick screen recording: Screencast at February 10th 2020 - 11.39.56 am.gif - Droplr

Let me know if you have any questions about that.

This is the script if anyone would like to see it without installing the form:

<script>
gform.addFilter('gform_calculation_result', function( result, formulaField, formId, calcObj ) {
  // apply to form 490, field 3 only
  // result less than 10
  if ( formId == '490' && formulaField.field_id == '3' && result < 10 ) {
    jQuery('#input_490_3').removeClass('larger').removeClass('equals').addClass('lower');
  }
  // resul more than 10
  else if ( formId == '490' && formulaField.field_id == '3' && result > 10 ) {
    jQuery('#input_490_3').removeClass('lower').removeClass('equals').addClass('larger');
  }
  // result equals 10
  else {
    jQuery('#input_490_3').removeClass('larger').removeClass('lower').addClass('equals');
  }
  // return the result unchanged in any event
  return result;
} );
</script>
1 Like

Great! This works perfect.
Thanks for helping me out with this!

1 Like