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

Question

Question

change color of single field based on date

Forms Version 10 Answers Site How To
Updated September 19, 2022
asked on September 15, 2022

Hello all,

I have a request that may be difficult (it is for me).  a user enters an items expiration date in a date box.  there is a calculation done (items expiration date- todays date).  the result is entered on a single line field.  What I am requesting, in JavaScript, is if the result is from 1-31 days out, then the single field shows in red, if the result is more than 31 days then the single field shows green.

If this is remotely possible, I and the user would appreciate it!

Donnie

0 0

Replies

replied on September 15, 2022

Is there a reason you're using a Single Line instead of a Date field? That would complicate things a bit because the field wouldn't have the format restrictions and built-in validations associated with a Date.

Also, is it turning red because you don't want to allow a date more than 30 days, or is just meant to be a sort of warning without actually preventing submission or anything?

0 0
replied on September 15, 2022

Hi Jason, I use a single line field only because it says "your item expires in xx days", the xx being the result of the formula.  Here's what it looks like:

It's shown in red now, but that's the color I set for all of the equations (there are numerous).  If it's between now and 31 days it's just a warning to the user, "hey, this is going to expire soon".  if it's more than 31 days then it's green.  we're not prevent submission.

0 0
View 2 previous replies
replied on September 15, 2022

You could do something like this, where you replace expirationTime with a custom class set in the field's advanced settings and replace redClass and greenClass with the classes that handle your styling.

Also, I'd recommend making the field read-only to prevent users from messing with the value. It's a calculation so there's no reason to leave it editable.

$(document).ready(function(){
  $('.expirationTime input').on('change', function(){
    // parse duration as int and find parent element
    var duration = parseInt($(this).val());
    var parent = $(this).parents('li');
    
    // reset indicator classes from parent
    parent.removeClass('greenClass redClass');
    
    // check for non-numeric values
    if (duration != NaN){
      // check range for red coloring
      if (duration > 0 && duration <= 31) {
        parent.addClass('redClass');
      }
      // check range for green coloring
      else if (duration > 31) {
        parent.addClass('greenClass');
      }
    }
  });
});

 

0 0
replied on September 15, 2022

I put the JavaScript in and added the .greenClass & .redClass to the CSS with the following:

 .redClass input  {font-size: 15px !important;
                                                color: red;             
                                                width: 90px;
                                                font-weight:bold;}          
               
.greenClass input  {font-size: 15px !important;
                                  color: green;             
                                  width: 90px;
                                  font-weight:bold;}

I put in "greenClass redClass" in the Advanced/CSS class of the "Expires in" field.  Now the text in the "Expires in" field changes to green only, no matter what date I enter.  What have I done wrong?

0 0
replied on September 15, 2022 • Show version history

greenClass and redClass should not be added to the "Expires In" field via the advanced/css options.

Those are meant to be added by the JavaScript only.

The only class you should add to the field is the class in the selector (used to attach the event handler), which in my sample code is "expirationTime"

 

In addition, you could consolidate some of the CSS so only the color changes are associated with the green/red classes.

For example,

.expirationTime input  {
        font-size: 15px !important;          
        width: 90px;
        font-weight:bold;
}
               
.greenClass  {
        color: green !important;
}

.redClass  {
        color: red !important;
}
0 0
replied on September 19, 2022

ok, so you've carried me almost all the way to a decent form! now I just need to know how to change the label color of "Expires in" to red or green.  After line 8 or 12 above, wouldn't I just add .cf-label{color: (whichever color here)}?

0 0
replied on September 19, 2022

Hi Donnie,

The script should be applying the class to the parent element, in which case you wouldn't want to just .cf-label because you only want to target the elements when the parent has one of the two classes.

What's odd is that the label is the one thing that should be changing color without any additional selectors since that's how it behaved on my form.

Do you maybe have other CSS on the form affecting .cf-label elements? If so, the order in which the CSS is written can play a role. If two things have equal levels of specificity (aka priority) then the last one in code order will be used.

For example, in the following example the input would always have blue text because both have equal specificity but the blue comes last.

input {
    color: red !important;
}

input {
    color: blue !important;
}

In the following example, the color would always be red because !important increases the priority to be higher than the blue styling.

input {
    color: red !important;
}

input  {
    color: blue;
}

To make the example for red/green a little more specific, you could try the following:

.expirationTime input  {
        font-size: 15px !important;          
        width: 90px;
        font-weight:bold;
}
               
.greenClass * {
        color: green !important;
}

.redClass *  {
        color: red !important;
}

This CSS basically translates to "any element contained within the element with the specified class"

That worked for me to get both the label and the input text colored.

If that isn't working for you, right-click and inspect the page to make sure the classes are actually being applied.

 

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

Sign in to reply to this post.

Details
Related Posts
Loading ...