You are viewing limited content. For full access, please sign in.

Question

Question

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

asked on February 14

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 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
replied on February 18

Hi Lindsay,

what would be the full code?

0 0
replied on February 18

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 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

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

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 February 15

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

0 0
replied on February 18

Yes, the fields got a CSS Class "RedOrGreen"

0 0
replied on February 18 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
0 0
replied on February 18

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.

 

""

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.