Change text color of text in field when checkbox is selected

[flygaard]

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. 

[Nesa Nurani]

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;

[flygaard]

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 · Accepted solution]

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]

[flygaard]

Thank you so much, that works perfectly! 😄 

[johnnyZ]

If you check the checkbox, it changes the color to red. 

How do you make it change back to black if you remove the check in the checkbox?

[Nesa Nurani]

If you refer to this script:

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

It sets color to red if the box is checked and to black once unchecked.

[johnnyZ]

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;}

[Nesa Nurani]

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";});}

[johnnyZ]

OMG, that's GREAT !!   Really cool !!!

Only change I made is I changed black to blue and red to white.

If the box is checked, I don't want to see any data that was entered into those fields, and make them ReadOnly.

If the box is not checked, I want to see the data in blue.

[johnnyZ]

Hi Nesa,

That script works great.  I was wondering if I can use something similar for other fields.

Can you show me how to do the same thing but with fields that do not have similar names?

I have both a YES and a NO checkbox.

If I check the NO box, I'd like it to change the colors in specific fields "white" and set to ReadOnly.

If not checked, leave them blue and allow data entry.

[Nesa Nurani]

You can place field names into an array like this:

var fields = ["Text1", "Test1", "Field1"];

fields.forEach(fieldName => {
  var field = this.getField(fieldName);
  field.textColor = event.target.value == "Off" ? color.blue : color.white;
  field.readonly = event.target.value != "Off";
});

This will work in "No" checkbox but if your checkboxes are mutually exclusive, and you uncheck "No" by checking "Yes" it will not work, you will need another script in "Yes" checkbox or modify script to work as calculation script.

[johnnyZ]

Thankyou for your response.

Yes, there are 2 checkboxes. You can't check both boxes, if you check one the other becomes unchecked, and vise versa.

What would that "other" script be, and which script goes into which checkbox? 

[Nesa Nurani]

I would suggest you to use calculation script instead, you can place it in any field.

var fields = ["Text1", "Test1", "Field1"];
var check = this.getField("Check Box1").valueAsString;
fields.forEach(fieldName => {
 var field = this.getField(fieldName);
  field.textColor = check == "No" ? color.white : color.blue;
  field.readonly = check == "No";});

[johnnyZ]

I'm sorry, I don't understand.

Here is the script after I put in the field names.

When I go into properties for the checkboxes, I don't see calculation as a choice, but you said that I can put in any field, so I put it in the "Tobacco_Packs_per_day" field.

var fields = ["Tobacco_Packs_per_day", "Tobacco_years_usage", "Tobacco_Quit_Date"];
var check = this.getField("Tobacco_Usage_Check_Box#1").valueAsString;
fields.forEach(fieldName => {
 var field = this.getField(fieldName);
  field.textColor = check == "No" ? color.white : color.blue;
  field.readonly = check == "No";});

 I'm sure that I'm doing something wrong, but I don't knowe what it is.

[Nesa Nurani]

Checkbox doesn't have 'Calculate' tab, sorry I should have been more clear, you can put it in any text field as custom calculation script.