Skip to main content
F
flygaard
Participating Frequently
March 23, 2022
Answered

Change text color of text in field when checkbox is selected

  • March 23, 2022
  • 2 replies
  • 5480 views

Hi 

I am new to Adobe Prepare Form and could use som help. 

I have a field with text and a checkbox to go with the text in that field. 

I would like the text in the field to turn red when the checkbox is selected. 

I suppose this can be done in Check Box Properties > Actions > Mouse up + Run a JavaScript

However, I have never used JavaScript before, so how do I do this? 

 

Please see the attached for clarification. 

This topic has been closed for replies.
Correct answer Nesa Nurani

Use same script just change "textColor" to "fillColor" and change colors (color.white(change 'white' to 'transparent' if you wish field to has no color) and color.yellow).

If you wan't different shade of yellow use RGB colors instead, for example:

if you want lemon yellow RGB code would be 255 247 0 so instead of color.yellow use this ["RGB", 255/255, 247/255, 0/255]

 

2 replies

F
flygaardAuthor
Participating Frequently
March 24, 2022

Thank you so much. Can you also help me with the javascript for turning the background color of the text field yellow when the checkbox is selected?

 

Please see attached for clarification. 

Nesa Nurani
Community Expert
Nesa NuraniCommunity ExpertCorrect answer
Community Expert
March 24, 2022

Use same script just change "textColor" to "fillColor" and change colors (color.white(change 'white' to 'transparent' if you wish field to has no color) and color.yellow).

If you wan't different shade of yellow use RGB colors instead, for example:

if you want lemon yellow RGB code would be 255 247 0 so instead of color.yellow use this ["RGB", 255/255, 247/255, 0/255]

 

Nesa Nurani
Community Expert
Nesa NuraniCommunity Expert
Community Expert
March 27, 2024

Hre is my Java script.

When the box is checked, the 8 fields change to red, but even if I remove the check, they stay red.

I don't know if it matters, but my default color is a dark blue.

if (event.target.value == "NO") {
this.getField("Release Name 01").textColor = event.target.value == "Off" ? color.black : color.red;
this.getField("Release Name 02").textColor = event.target.value == "Off" ? color.black : color.red;
this.getField("Release Name 03").textColor = event.target.value == "Off" ? color.black : color.red;
this.getField("Release Name 04").textColor = event.target.value == "Off" ? color.black : color.red;
this.getField("Relationship Name 01").textColor = event.target.value == "Off" ? color.black : color.red;
this.getField("Relationship Name 02").textColor = event.target.value == "Off" ? color.black : color.red;
this.getField("Relationship Name 03").textColor = event.target.value == "Off" ? color.black : color.red;
this.getField("Relationship Name 04").textColor = event.target.value == "Off" ? color.black : color.red;}

if (event.target.value == "NO") {
this.getField("Release Name 01").readonly = true;
this.getField("Release Name 02").readonly = true;
this.getField("Release Name 03").readonly = true;
this.getField("Release Name 04").readonly = true;
this.getField("Relationship Name 01").readonly = true;
this.getField("Relationship Name 02").readonly = true;
this.getField("Relationship Name 03").readonly = true;
this.getField("Relationship Name 04").readonly = true;}

else {
this.getField("Release Name 01").readonly = false;
this.getField("Release Name 02").readonly = false;
this.getField("Release Name 03").readonly = false;
this.getField("Release Name 04").readonly = false;
this.getField("Relationship Name 01").readonly = false;
this.getField("Relationship Name 02").readonly = false;
this.getField("Relationship Name 03").readonly = false;
this.getField("Relationship Name 04").readonly = false;}

 


Try this:

 

for (var i=1; i<=4; i++) {
["Release Name 0", "Relationship Name 0"].forEach(fieldName => {
var field = this.getField(fieldName + i);
field.textColor = event.target.value == "Off" ? color.black : color.red;
field.readonly = event.target.value != "Off";});}

 

Nesa Nurani
Community Expert
Nesa NuraniCommunity Expert
Community Expert
March 23, 2022

You can use this at checkbox as you describe it, just change "Text Field" to your actual text field name:

this.getField("Text Field").textColor = event.target.value == "Off" ? color.black : color.red;

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices