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

Question

Question

How to change the color of a field based on returned result within field?

Forms
Updated January 28, 2016
asked on January 25, 2016

I'm trying to change the color of a field based on a result returned within that field. The possible results are: pass, fail or undetermined. I would like for the field to turn green, red or yellow respectively. How would I go about doing this? Below is a screenshot of my table. The "Pass/Fail" column is the field I would need to change.

 

Thanks!

0 0

Answer

SELECTED ANSWER
replied on January 27, 2016

Making the field read-only overrides any color changes made by jQuery's .css

See if this version works better for you:

$(document).ready(function(){
  $(document).on('change', '.passFail input', function(){
    if ($(this).val() == 'Pass'){
      this.setAttribute('style', 'background-color: green !important');
    }
    else if ($(this).val() == 'Fail'){
      this.setAttribute('style', 'background-color: red !important');
    }
    else if ($(this).val() == 'Undetermined'){
      this.setAttribute('style', 'background-color: yellow !important');
    }
    else {
      $(this).css('background-color', 'white');
    }
  });
});

 

2 0

Replies

replied on January 26, 2016 • Show version history

Hi David,

The easiest way to change a field's color (based on its value) is to use JavaScript "if" statements. For instance, when a Pass/Fail field changes, if its input is "Pass", then change the text to "green". You can assign a class to the Pass/Fail column in its advanced settings. Here is one way of doing it:

$(document).ready(function(){
  $(document).on('change', '.passFail input', function(){

    if ($(this).val() == 'Pass'){
      $(this).css('color', 'green');
    }
    else if ($(this).val() == 'Fail'){
      $(this).css('color', 'red');
    }
    else if ($(this).val() == 'Undetermined'){
      $(this).css('color', 'orange');
    }
    else {$(this).css('color', 'rgb(85, 85, 85)');}
  });
});

You can copy and paste this into the "JavaScript" section of your form's "CSS and JavaScript" tab. Then, go to the advanced tab in the "Pass/Fail" column's field options, and type "passFail" into the CSS class section. 

Click here for more information on using JavaScript with Forms.

Let me know if this works for you!

Edit: If you want to change the background color of the field instead of the field's text, then replace color with background-color (lines 5, 8, 11, 13), and replace rgb(85,85,85) with white (line 13). To see a list of supported colors and their names, click here.

3 0
View 3 previous replies
replied on January 27, 2016

Alexander,

This works great except that it still only changes the color of the text. I was hoping to change the color of the entire space the text is inside. How would I adjust the code to make that happen?

Thanks,

0 0
replied on January 27, 2016

Hi David,

See my edit in the above response about changing the background-color of the input fields. 

1 0
replied on January 27, 2016

Thank you! This does exactly what I need.

0 0
replied on January 27, 2016

Oops, I have one more question. Is there a way to make this field read-only, and still have the color green/red/orange? I made the field read only, but it overrides the color with just a grey background. 

0 0
SELECTED ANSWER
replied on January 27, 2016

Making the field read-only overrides any color changes made by jQuery's .css

See if this version works better for you:

$(document).ready(function(){
  $(document).on('change', '.passFail input', function(){
    if ($(this).val() == 'Pass'){
      this.setAttribute('style', 'background-color: green !important');
    }
    else if ($(this).val() == 'Fail'){
      this.setAttribute('style', 'background-color: red !important');
    }
    else if ($(this).val() == 'Undetermined'){
      this.setAttribute('style', 'background-color: yellow !important');
    }
    else {
      $(this).css('background-color', 'white');
    }
  });
});

 

2 0
replied on January 28, 2016

Perfect! Thank you so much.

2 0
replied on January 26, 2016
0 0
replied on January 26, 2016

I've seen this and actually implemented it. The problem is that it changes the text color for the whole row, instead of just the background color of one field (Pass/Fail).

0 0
replied on January 4, 2019

Question: I wrote the code to change the background for a field within a table. However, once the change happens I get a peach border and I can no longer see the content of the field. 

Ideally, I would like the background change to yellow when a change happens and able to see the content of the field.  Any suggestions?

$(document).ready(function(){
    $('.cf-table-block').on('change', 'input', changeColor);
  function changeColor () {
    if ($('#q299(1) input').val() != '') {
      $('#q299(1) input').css('currentAge','#ffff00');
   }
    else {
      $('#q299(1) input').css('currentAge','none');
    }     
  }
}); 

 

 

You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...