Change Color of a Field Marked Read-Only Using JavaScript

asked on May 28, 2019

I have a form that compares values in two fields. If there is a discrepancy it will show the discrepancy amount in a field. If the amount does not the same, it needs to turn the field red. If it is the same it needs to turn the field green. I am making the discrepancy field read only using JavaScript because I need the value available when it is saved in the repository. If I have the discrepancy field marked as read only using JavaScript it will not turn the field either color. If I do not mark the field as read only it works correctly. Below is the JavaScript I am currently using:

$('.GrossAmount, .GL_Coding_Total').change(function() {
        var invDollars = $(".GrossAmount input").val();
        var totDollars = $(".GL_Coding_Total input").val();

        if (invDollars != totDollars) {
            $('.discrepancy input').css('background-color', '#FF8888 !important');
            $('.Approve').hide();
            $('.Reject').hide();
            $('.Submit').hide();

        } else {
            $('.discrepancy input').css('background-color', '#B4EDB4');
            $('.Submit').show();
            $('.Approve').show();
            $('.Reject').show();
        }
    });

Anyone have any ideas what I've done wrong?

1 0

replied on May 28, 2019 • Show version history

Usually for things like this, I just add/remove classes rather than applying CSS directly to the field.

The [backend-readonly] attribute has some !important CSS that overrides inline styling due the the ranking of CSS specificity. If you use a custom class, you can overcome that using higher specificity.

Here is in example of the CSS I use for applying a "warningFlag" class to read only fields,

input[backend-readonly].warningFlag {
    color: #b94a48;
    background-color: #f2dede !important;
    border: 2px solid #eed3d7;
}

0 0

View 2 previous replies

replied on May 28, 2019

Jason, I actually tried that earlier and couldn't get it to work. I just tried it again and it works fine. Weird. Here is what I did.

.discrepancy {background-color: #FF8888 !important};

$('.GrossAmount, .GL_Coding_Total').change(function() {
        var invDollars = $(".GrossAmount input").val();
        var totDollars = $(".GL_Coding_Total input").val();

        if (invDollars != totDollars) {
            $('#q22').addClass('discrepancy');
            $('.Approve').hide();
            $('.Reject').hide();
            $('.Submit').hide();

        }

0 0

replied on May 28, 2019

No that I have that working, the else statement is not working. I currently have the following. I can see in developer tools that it will remove the CSS class and add the new CSS class, but it doesn't actually change the color on the form.

$('.GrossAmount, .GL_Coding_Total').change(function() {
        var invDollars = $(".GrossAmount input").val();
        var totDollars = $(".GL_Coding_Total input").val();

        if (invDollars != totDollars) {
            $('#q22').removeClass('nodiscrepancy');
            $('#q22').addClass('discrepancy');
            $('.Approve').hide();
            $('.Reject').hide();
            $('.Submit').hide();

        } else {
            $('#q22').removeClass('discrepancy');
            $('#q22').addClass('nodiscrepancy');
            $('.Submit').show();
            $('.Approve').show();
            $('.Reject').show();
        }
    });

0 0

replied on May 28, 2019

You should be able to inspect to see which styling rule is taking precedent. What color do you see when the discrepancy class is removed?

What CSS are you using for the "nodiscrepancy" class? Does it show up at all when you inspect?

0 0

replied on May 28, 2019

It removes the discrepancy class and applies the nodiscrepancy class as expected, but there is no color shown.

1 0

replied on May 28, 2019

Your ending semicolons need to be inside of the brackets to end each style setting.

The syntax error will break everything that follows, which is probably why the first one is working and the second one isn't.

0 0

Question

Question

Change Color of a Field Marked Read-Only Using JavaScript

Replies

Sign in to reply to this post.