CODEWITHSUNDEEP
jquerycssvalidation
Dan C
Dan C

Reputation: 495

Change text fields background colour if negative number using Jquery/CSS

I have the following text input on a budget calculator form which displays the final balance...

<tr><td align="right"><b>Balance: &pound;</b></td><td align="left"><input type="text" class="res" name="res" id="res" size="10" readonly="readonly"></td></tr>

How do I go about setting the background of the input to red using css and jquery if the value is a negative number?

I am sure this is very simple but I have scanned the net looking for a solution for ages.

Please can someone help?, my head hurts!

Upvotes: 1

Views: 4507

Answers (2)

SteD
SteD

Reputation: 14027

You can use the .bind to attach a onkeyup event to it.

$(document).ready(function(){
$('.res').bind('keyup', function() { 

if($('.res').val() < 0){
 $('.res').css({'background-color':'#FF0000'});
}});
});

Upvotes: 1

RaYell
RaYell

Reputation: 70414

$('input').blur(function () {
    $(this).toggleClass('redBackground', $(this).val() < 0);
});

Set a class redBackground to give your inputs red background and it should work fine.

CSS:

input.redBackground {
    background-color: red;
}

Upvotes: 3

Related Questions