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

Question

Question

Forms color for read-only and non blank fields

asked on December 6

I have seen the many posts about changing colors of fields at the time of field input, dropdown selection, etc.

I have a form that that has almost a hundred optional fields. When the worker opens the form that was assigned to them, I would like the fields that have data in them to be a different color so that they can easily be seen. All of the fields on the form are read-only.

So, I need to change the color on the submitted form fields (single and multi-line text, checkbox, radio-buttons and dropdown) when they are read-only AND not blank. Any assistance would be greatly appreciated. Thanks in advance.

0 0

Answer

SELECTED ANSWER
replied on December 6

Hey,

Its a bit of a pain to do as each of those fields have a different way of determining if they are "filled". I threw this together for you, should help getting you stared.

$(document).ready(function() {
  function colorFields()
  {
    $('input[type=text]').each(function() {
      console.log($(this).val());
      if($(this).val() != "")
      {
       $(this).attr('style', 'background-color: #ff0000 !important;');
      }
      else
      {
        $(this).attr('style', '');
      }
    });
    $('textarea').each(function() {
      if($(this).text() != "")
      {
       $(this).attr('style', 'background-color: #ff0000 !important;');
      }
      else
      {
        $(this).attr('style', '');
      }
    });
    
    $('input[type=radio]').each(function() {
      if($(this).is(":checked"))
      {
        console.log('test');
       $(this).parents('span').attr('style', 'background-color: #ff0000 !important;');
      }
      else
      {
        $(this).parents('span').attr('style', '');
      }
    });
    
    $('input[type=checkbox]').each(function() {
      if($(this).is(":checked"))
      {
        console.log('test');
       $(this).parents('span').attr('style', 'background-color: #ff0000 !important;');
      }
      else
      {
        $(this).parents('span').attr('style', '');
      }
    });
    
    $('select').each(function() {
      console.log($(this).val());
      if($(this).val() != "")
      {
       $(this).attr('style', 'background-color: #ff0000 !important;');
      }
      else
      {
        $(this).attr('style', '');
      }
    });
  }
  
  $(document).on("lookupcomplete", function (event) {
        colorFields();
    });
});

Hope it helps :)

0 0
replied on December 7

This works great! THANK YOU!!

0 0

Replies

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

Sign in to reply to this post.