Change Text And Background Color Of Field Based On Field Value

[cflapt]

I have a text field with id=TextField. When the user types 10 into this field I would like the font color of 10 to change immediately to red (and if possible change the background color of the text field).

 

It seems the best way to do this is change the CSS style of TextField when 10 is entered into this field. 

 

I searched online but couldn't get any of the available code to work.

 

Thanks.

[MayMusic]

You can try this

<script>
function f_color(){
if (document.getElementById('ID').value = '10') {
document.getElementById('ID').style.color = "red";
}
}
document.getElementById('ID').onchange= f_color;
</script>

[MayMusic]

To also change the background color you can have:

<script>
function f_color(){
if (document.getElementById('ID').value = '10') {
document.getElementById('ID').style.color = "red";
document.getElementById('ID').style.background="yellow";
}
}
document.getElementById('ID').onchange= f_color;
</script>

Make sure to replace ID in both codes

[cflapt]

Unfortunately I can't get this to work.

I tried both scripts (one at a time) by inserting them into an HTML block. here is what i inserted for the first script

 

<script>
function f_color(){
if (document.getElementById('EditRecordnote').value = '10') {
document.getElementById('EditRecordnote').style.color = "red";
}
}
document.getElementById('EditRecordnote').onchange= f_color;
</script>

 

 

Here is the input code: <input type="text" class="cbFormTextField" size="2" maxlength="255" name="EditRecordnote" id="EditRecordnote" value="10">

[MayMusic]

First you need to put the script in the footer or after input tag, also this is calling the function onchange so if you have the value by default it will not work and only work when you type in 10 in the box and leave the box. If you would like to show it when the page loads then change it to:

<input type="text" class="cbFormTextField" size="2" maxlength="255" name="EditRecordnote" id="EditRecordnote" value="10">

<script>
function f_color(){
if (document.getElementById('EditRecordnote').value = '10') {
document.getElementById('EditRecordnote').style.color = "red";
document.getElementById('EditRecordnote').style.background="yellow";
}
}
f_color();
</script>

[Scottster]

I am trying to implement this on a Report Results Page, without luck.  I assume the script goes in the footer, but is there some other change that is necessary?

[Jan]

Hello Scottster,

 

I hope, this answer can help.

[Kurumi]

Hello - Just wanted to share another way to dynamically change the color of the calculated value/field when a condition is met using CSS.

You can insert this in the Header:

<style>
span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="No"])  {
  color: #2543be;
}

span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="Yes"])  {
  color: #29be25;
}

</style>

If you have more conditions or other fields, you can use this:

<style>
span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="No"])  {
  color: #2543be;
}

span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="Yes"])  {
  color: #29be25;
}

span.cbFormCalculatedField:has(+ input[name="InsertRecordFIELDNAME"][value="Inactive"])  {
  color: #2543be;
}

span.cbFormCalculatedField:has(+ input[name="InsertRecordFIELDNAME"][value="Active"])  {
  color: #29be25;
}
</style>

Hope it helps!

[Kurumi]

 Hi! You can also use this CSS code in other Form Elements:

Text Field and Email

<style>
input[name="InsertRecordFIELDNAME"][value="Active"] {
  color: green;
}
</style>

Display-Only field

<style>
span.cbFormData:has(+ input[name="InsertRecordFIELDNAME"][value="Active"]) {
  color: green;
}
</style>

 

[IamNatoyThatLovesYou]

  Hello Everyone, just sharing this other solution that may help.