Change the color of a field based on returned result within field

by

i wanted to change the field value to green after selecting the value "OK" and red on "NOK" and so on. i have used the js code like the below code but it is not working like before clicking the sumbit button colours are changing but after it is submitted the field colour is again white.

 $(document).ready(function(){
    if(document.getElementById('janadd').value == 'NOK') {
      document.getElementById('janadd').style.background-color = "red";
    }
    else if (document.getElementById('janadd').value == 'OK') {
      document.getElementById('janadd').style.background-color = "green"; 
     } 
    else if(document.getElementById('janadd').value == 'Partial'){
     document.getElementById('janadd').style.background-color = "yellow"; }
    };
 });

2 thoughts on “Change the color of a field based on returned result within field”

  2. $(document).ready(function(){
    var value = $('#janadd').attr("value");

    if( value == 'NOK') {
      $('#janadd').css("background-color", "red");
    }
    else if (value == 'OK') {
                $('#janadd').css("background-color", "green"); 
     } 
    else if(value == 'Partial'){
               $('#janadd').css("background-color", "yellow");
    };
 });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="janadd" value="Partial">Yellow Color</div>

    i use the jquery syntax:

    $(document).ready(function(){
    var value = $('#janadd').attr("value");
    if( value == 'NOK') {
      $('#janadd').css("background-color", "red");
    }
    else if (value == 'OK') {
                $('#janadd').css("background-color", "green"); 
     } 
    else if(value == 'Partial'){
               $('#janadd').css("background-color", "yellow");
    };
 });
    Reply

Leave a Comment