Question

Looking for CSS or Javascript to assign negative numbers red, and positive numbers green.

Forms

Updated September 4, 2024

asked on February 14, 2020

Hello,

Attempting to pull budget data through a database lookup which would then be inputted into a field; then I hope to style the input color based on being a negative or positive numbers. Any ideas? My CSS/Javascript skills are minimal, really I just copy, paste and test :P

I started with this, which does not work.

$(document).ready(function(){
  $('.RedOrGreen input').each(function ()
    
    if ($(this).val()>0);{
      this.setAttribute('color: green');
    }
else if ($(this).val()<=0);{
      this.setAttribute('color: red');
    }
  });
});

Thx!

1 0

Answer

SELECTED ANSWER

replied on February 16, 2020 • Show version history

JavaScript:

$(function() {
	$(".RedOrGreen [vo]").keyup(function( e ) {
		let val = this.value,
			jElem = $(this),
			addClass, removeClass;

		if ( val !== "" && !isNaN( val ) ) {
			val = Number( val );

			addClass = ( val > 0 ? "numPos" : "numNeg" );
			removeClass = ( val > 0 ? "numNeg" : "numPos" );

			jElem.addClass( addClass );
			jElem.removeClass( removeClass );
		}
	});
});

CSS:

.numNeg {
	border-color: red;
}

.numPos {
	border-color: green;
}

1 0

View 2 previous replies

replied on February 18, 2020

Hi Lindsay,

what would be the full code?

0 0

replied on February 18, 2020

Thank you!

This works great!

I added:

.numNeg {
	color: red;
  border-color: red;
}

.numPos {
	color: green;
  border-color: green;
}

to color the display and text :)

Now I just wish I could make it read only and let a lookup populate the info :/

Thanks all!

0 0

replied on February 18, 2020 • Show version history

If it is independent of user input then the JavaScript is going to be different.

$( document ).ajaxStop( function() {
	$(".RedOrGreen [vo]").each(function() {
		let val = this.value,
			jElem = $(this),
			addClass, removeClass;

		if ( val !== "" && !isNaN( val ) ) {
			val = Number( val );

			addClass = ( val < 0 ? "numNeg" : "numPos" );
			removeClass = ( val < 0 ? "numPos" : "numNeg" );

			jElem.addClass( addClass );
			jElem.removeClass( removeClass );
		}
	});
});

0 0

replied on February 19, 2020

Thanks Lindsay! This works with a database lookup for the negatives, but not for the positives. However, $0.00 does format green, interestingly enough.

0 0

replied on February 19, 2020

This is going to sound harsh but you are going to have to tinker with the code by yourself from this point on. It is imperative you know the basics of CSS and JS when using Laserfiche Forms and this is a good opportunity to get to the bottom of this mostly addressed problem.

0 0

Replies

replied on September 4, 2024

Here's how I did it without JS.

I just created two total fields and used Field Rules to hide the negative when the other is positive and hide the positive when the other is negative:

Then styled each with CSS and used a tip from another forum to overwrite the read-only styling:

/* POSITIVE/NEGATIVE DIFFERENCE TOTAL COLORS */
.negative .cf-field input[readonly] {
    border: 3px solid red !important;
    font-weight: bold !important;
    background-color: #ff00004d !important;
    color: black !important;
    text-align: center !important;
}

.positive .cf-field input[readonly] {
    border: 3px solid green !important;
    font-weight: bold !important;
    background-color: #1eff004d !important;
    color: black !important;
    text-align: center !important;
}

Seems to work great for me:

But I welcome any feedback on how hacky or problematic this might seem to someone more experienced :)

1 0

replied on February 15, 2020

Did you assign the class RedOrGreen to the field(s)?

0 0

replied on February 18, 2020

Yes, the fields got a CSS Class "RedOrGreen"

0 0

replied on February 18, 2020 • Show version history

I have the following code in JS:

$(document).ready(function(){

  $(function() {
	$(".RedOrGreen [vo]").keyup(function( e ) {
		let val = this.value,
			jElem = $(this),
			addClass, removeClass;

		if ( val !== "" && !isNaN( val ) ) {
			val = Number( val );

			addClass = ( val > 0 ? "numPos" : "numNeg" );
			removeClass = ( val > 0 ? "numNeg" : "numPos" );

			jElem.addClass( addClass );
			jElem.removeClass( removeClass );
		}
	});
});

 });

Edit:

The positive value works in a field, however the -ve doesn't :(

Also, how would you make sure this applies to a field being populated by lookup?

0 0

replied on February 18, 2020

Found it: https://answers.laserfiche.com/questions/90414/How-to-change-the-color-of-a-field-based-on-returned-result-within-field

0 0

replied on February 18, 2020

Hey Sonia,

It is my wish to have it have it apply via a lookup--I'll let you know once I get database access to test it. Good chance it won't; but if it doesn't I'll still use this for other budget/accounting number fields.

Thanks for linking the other post--I see it mention read-only then a "try this", only I don't see what is different to allow it for a read only and don't know how to adapt that for my use. I see the conversation between David and Alexander, but I'm kind of convinced David just abandoned trying to keep it as a read-only field (I could be wrong) going instead for what Alexander provided that works.

1 0

You are not allowed to follow up in this post.

Question

Question

Looking for CSS or Javascript to assign negative numbers red, and positive numbers green.

Answer

Replies

Sign in to reply to this post.