Conditionally change textbox color depending on a field

[chumkirebzi]

I am designing an application and  I have a submission form for my orders. Currently, I'm setting a text area to required if the purchase quantity is greater than 5 through rules, however I also want to highlight this text area. is this possible?

[Kurumi]

Hi @chumkirebzi - this is possible using Calculated Value and JS.

1. Create a Virtual field as an identifier of the purchase quantity and set this as a Calculated Value. You can use this formula:

CASE WHEN CONVERT(INT, [@field:purchase_quantity]) > 5
THEN 'Color'
ELSE
'No Color'
END

Take note that the sample field of purchase quantity is a Text(255) so this formula converts it first to an Integer. You may also hide this Virtual Field in the Advanced tab if you don't want to show it in the DataPage.

2. In the Footer, use this code:

<script>

document.querySelector("input[name='cbParamVirtual1']").addEventListener("change", function color(){
 
if (document.querySelector("input[name='cbParamVirtual1']").value == "Color"){
 
document.querySelector("textarea[name='InsertRecordTEXTAREA_FIELDNAME']").style.background = "lightblue";
 
}
 
else {
 
document.querySelector("textarea[name='InsertRecordTEXTAREA_FIELDNAME']").style.background = "#FFFFFF";
 
}
 
});
  
</script>

This script will check the Virtual Field's value if it is 'Color' or 'No Color'. If 'Color' then it will change the background color of the Text Area. Feel free to change the colors.

You can also check this reference post