javascript background color for default value

asked on May 21, 2019

Hello,

I have a scenario where the background color of a field is changed based on Text.

The issue I'm having is that it's based on Change.

What I want is that the field has a default value & the color should also reflect in that...

If possible currently the field is single line , but I would like it to be drop down, I can change it to Select.

But the color of the field should reflect as per script...

Here is the code:

$('.ObjectivesTable').on('change','.ObjectivesColor input', function() {

    if ($(this).val() == 'Move'){
      $(this).css('background-color', 'lightgreen');
    }
    else if ($(this).val() == 'Ava'){
      $(this).css('background-color', 'pink');
    }
    else if ($(this).val() == 'Ground'){
      $(this).css('background-color', 'lightpurple');
    }
    else {$(this).css('background-color', 'orange');}
  });

copied from another answers post.

Please help.

Regards,

Sahil

0 0

replied on May 21, 2019 • Show version history

$(document).ready(function(){
colorObjectives();
});

function colorObjectives(){
$('.ObjectivesColor select').each(function() {

    if ($(this).val() == 'Move'){
      $(this).css('background-color', 'lightgreen');
    }
    else if ($(this).val() == 'Ava'){
      $(this).css('background-color', 'pink');
    }
    else if ($(this).val() == 'Ground'){
      $(this).css('background-color', 'lightpurple');
    }
    else {$(this).css('background-color', 'orange');}
  });    

}

You will need the document ready method for this, attempting to trigger the field on load will run too fast and out of order.

This code says, when the document is ready (all fields are displayed and ready) then run my function to color the objectives. In that function, for each objective select, color it.

Note that these colors will be removed if saving the form to the repository, or converting to a PDF. It is only good for during the usage of the form.

0 0

View 4 previous replies

replied on May 22, 2019

Hi Chad,

Thanks so much!

It works great, however only for the first row of Table....

1. How to get it work for all rows?

2. Is it possible to have it saved in Repository or when Downloading on submission?

Thanks a lot!

Sahil

0 0

replied on May 22, 2019

It should be running on each field with the class ObjectivesColor, which would be all rows of your table.

I think it might be possible to conditionally style a repository image, but no official information has been released on how to do so and it requires essentially hacking the system. In general any changes to the form made with javascript, with the exception of setting the value of a field, are removed on submission. All styles must be hard coded into the CSS portion with no conditions for repository submissions.

0 0

replied on May 22, 2019

It worked on change, but not on the default value....

0 0

replied on May 22, 2019

I am thinking you might have someone elses code, there is no .change or on('.change' methods in my code. So it either should work on load or not work at all.

0 0

replied on May 22, 2019

You might be right.

I'll put the code here day after tomorrow as I'm not in the office.

If you get chance please have a look....

Thanks so much!

0 0

replied on May 23, 2019

Hi Chad,

Please see the code below, I have indeed the same code for change... as the requirement is to change the color once the user makes amends...

Any thoughts how to make this work for both on load & on change?



$(document).ready( function() {
//Load Function for colors of Default fields
 	colorObjectives();

   
//Function for changing colors of fields
  $('.ObjectivesTable').on('change','.ObjectivesColor select', function() {

    if ($(this).val() == 'V'){
      $(this).css('background-color', 'lightgreen');
    }
    else if ($(this).val() == 'A'){
      $(this).css('background-color', 'pink');
    }
    else if ($(this).val() == 'S'){
      $(this).css('background-color', 'purple');
    }
    else {$(this).css('background-color', 'orange');}
  });   
  


  //CheckButton Functions
  
 $('#CheckAllButton').on("click", function(){
$('.setcheckbox input').prop('checked', true).change();
});
$('#ClearAllButton').on("click", function(){
$('.setcheckbox input').prop('checked', false).change();
});
  
  //Check Button A & Clear Button A
  $('#CheckA').on("click", function(){
$('.Asetcheckbox input').prop('checked', true).change();
});
$('#ClearA').on("click", function(){
$('.Asetcheckbox input').prop('checked', false).change();
 }); 
  //Check Button B & Clear Button B
  $('#CheckB').on("click", function(){
$('.Bsetcheckbox input').prop('checked', true).change();
});
$('#ClearB').on("click", function(){
$('.Bsetcheckbox input').prop('checked', false).change();
});
  
  //Document Ready Function End
});
 

//Outside of Document Ready
function colorObjectives(){
$('.ObjectivesColor select').each(function() {

    if ($(this).val() == 'V'){
      $(this).css('background-color', 'lightgreen');
    }
    else if ($(this).val() == 'A'){
      $(this).css('background-color', 'pink');
    }
    else if ($(this).val() == 'S'){
      $(this).css('background-color', 'lightpurple');
    }
    else {$(this).css('background-color', 'orange');}
  });
  }

0 0

replied on May 24, 2019

Looks good, your calling the function on load. You will have to debug using console.log throughout the code to find where it is not doing what you expect.

https://developer.mozilla.org/en-US/docs/Web/API/console#Outputting_text_to_the_console

0 0

Question

Question

javascript background color for default value

Replies

Sign in to reply to this post.