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

Question

Question

change field color on change in collection

asked on September 20, 2017

I have a collection that has student details (name, age, etc).  Parents can update the students details. 

I want to be able to change the color of the field when they have typed something in.

I have this working for normal fields...

$(document).ready(function(){
  var manuallyFocused = false;
  $('#q54 input').on('focus',function(){ manuallyFocused=true;});
  $('#q54 input').on('blur',function(){ manuallyFocused=false;});
  $('#q54 input').on('change',function(){
    if (manuallyFocused)
    {
      $('#q54 input').css('background','#ffff99');
    }
    else
    {
      $('#q54 input').css('background','none');
    }
  });
});

 

0 0

Answer

SELECTED ANSWER
replied on September 20, 2017 Show version history

Hi Jonathan,

Here you are:

$(document).ready(function(){
  $('.collection').on('change', 'input', changeColor);
  $('.normalField').on('change', 'input', changeColor);
  function changeColor () {
    if ($(this).val() != '') {
      $(this).css('background','#ffff99');
    }
    else {
      $(this).css('background','none');
    }     
  }
});

This seems to work to your description, where the collection is given the class "collection". It changes only the color of the field that the parent is filling/clearing information from as you would expect.

Just noting that I tried targeting the field directly (#q4 in my case), but that didn't work as I wanted.

$(document).ready(function(){
  $('.collection').on('change', 'input', changeColor);
  function changeColor () {
    if ($('#q4 input').val() != '') {
      $('#q4 input').css('background','#ffff99');
    }
    else {
      $('#q4 input').css('background','none');
    }     
  }
});

As you can see, if the parent added multiple collections before filling any of the fields out, filling in one field would change the color of even the blank ones. Not to mention that the color wouldn't clear unless all of the fields in each collection was blank. 

Hope this helps.

2 0
replied on September 20, 2017

Thanks Tri Pham!  

This works perfectly. You have saved me a considerable amount of time. I really appreciate your help on this.

0 0
replied on September 20, 2017

What would I need to add to change the back ground color of a drop-down in a collection??

Thanks in advance

0 0
replied on September 21, 2017

You can add this line to trigger the function for drop-down fields.

  $('.dropdown').on('change', 'select', changeColor); 

 

0 0
replied on September 21, 2017

Hi Tri Pham,

How do we get that color change to also show on the 'reviewers' view of the form. If the User is assigned, the fields are editable and white. If the User isn't assigned, the fields are read only grey.

 

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.