Jump to content

Conditionally change textbox color depending on a field


Recommended Posts

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?

1_Form.png.72fafe04bc4d0df314ac6269f16e0184.png

Link to comment
Share on other sites

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 

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...