-1

I have an input field which will be populated with a calculation, but is read only on load. I am wondering how I can changed the background color, text color, ect once the field is populated. I want the field to be red if the input is less than 0 and green if it is correct input of 0 or greater. The field is read only through the entire process.

Basically, I need to change the read only background color based on the input of the field and not when the page loads using the css input[readonly].

Schwagmister
  • 568
  • 6
  • 27
  • 1
    Do you have a JSFiddle? – General_Twyckenham Jul 03 '14 at 19:37
  • 2
    And, seriously, what have you tried, where are you stuck? I'm pretty sure I've answered this, or a *very similar*, question before now on this site. – David Thomas Jul 03 '14 at 19:38
  • Just add/remove the appropriate class based on the value, ie `$("myinput").addClass("red")` – Patrick Evans Jul 03 '14 at 19:41
  • I have not been able to find anything here about changing a read only fields background color, the "duplicate" you claim is just changing the placeholder. This does not work as I am using a different forms application which isnt extremely great. All of the answers I have seen boil down to using a css class that will change when the field is read only. But I need it to have a specific background color for a specific range of numbers and a different color for a different range of numbers. – Schwagmister Jul 03 '14 at 21:37
  • http://jsfiddle.net/uK6Ew/ Since you didn't provide any code or a http://jsfiddle.net, it is impossible to know exactly, but if you are changing the value with Javascript, you have to manually trigger the event handler. – Jared Farrish Jul 03 '14 at 21:52
  • 1
    Also a lesson on SO: Most of the action on a question occurs in the first 10-15 minutes; if you stroll back nearly two hours later, you're probably cold by then (or it's already cycled to some state you don't agree with). – Jared Farrish Jul 03 '14 at 21:56

2 Answers2

0

There's a lot of ways, but if you're using jQuery, there's a simple way to do so: $(selector).css(propertyName, value). You'll probably want to put that in an onChange event handler. Give it a try and let us know what you come up with and whether or not you have more specific questions. Try browsing the jQuery docs.

http://api.jquery.com/css/

That link has an example that's pretty darn close to what you want.

Mike Bell
  • 1,306
  • 11
  • 9
0

You need to use the onchange event of the inputs to change the background-color CSS property and value attribute of the output. Personally, I would define classes with certain background colors in CSS and then change the className attribute of the output to attribute a class to the output.

var output /*Our output*/, inputs /*Our inputs*/;
document.addEventListener("DOMContentLoaded", function() { //When the document has loaded...
    //Set the variables.
});

function update() {
    var input1 = parseFloat(inputs[0].value), input2 = parseFloat(inputs[1].value);
    if (isNaN(input1) || isNaN(input2)) {
        //Make the background-color accordingly
    } else {
        output.value = input1+input2;
        if (input1+input2 > 0) {
            //Make the background-color accordingly
        } else {
            //Make the background-color accordingly
        }
    }
}

Here's the fiddle: http://jsfiddle.net/NobleMushtak/HTP5d/

Noble Mushtak
  • 1,764
  • 9
  • 22