• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Javascript on a pdf form to change the colour of a field depending on the value in another field

Community Beginner ,
May 30, 2017 May 30, 2017

Copy link to clipboard

Copied

I have used the following code to change the colour of a text field in a PDF form depending on the value entered into that field.

var v = +event.value; {

if (v>=1 && v<=5) 

event.target.fillColor = ["RGB",0.537,0.776,0]; 

Can anyone suggest how I can modify this code to change the colour of another field?

I want to change the colour of field "Text453" depending on the number entered into field "RISK"

(I have posted this question on another forum.)

TOPICS
Acrobat SDK and JavaScript , Windows

Views

4.9K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jun 02, 2017 Jun 02, 2017

The correct syntax is to put the curly brackets after the if-condition. It works in your case because you only have one line of code associated with it, but it's not good practice. This is how it should look like:

var v = +event.value;

if (v == 1) {

    this.getField("Text803").fillColor = ["RGB",0.537,0.776,0];

} else {

    this.getField("Text803").fillColor = color.white;

}

Likes

Translate

Translate
Community Expert ,
May 31, 2017 May 31, 2017

Copy link to clipboard

Copied

Change:

event.target.fillColor = ["RGB",0.537,0.776,0];

To:

this.getField("Text453").fillColor = ["RGB",0.537,0.776,0];

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 31, 2017 May 31, 2017

Copy link to clipboard

Copied

Okay great, I am so close.

I want more than one field to change and am trying to use this code.

As it isn't working I know I must be doing it wrong.

Any suggestions?

var v = +event.value;{

if (v == 1)

this.getField("Text793" && "Text794" && "Text795").fillColor = ["RGB",0.537,0.776,0];

else this.getField("Text793" && "Text794" && "Text795").fillColor = color.white;}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 01, 2017 Jun 01, 2017

Copy link to clipboard

Copied

I don't know what you are trying to achieve with a list of field names of getField but that's not how it's done. If you need to do three field you need three separate statements. If they are part of an if statement wrap them in braces ie {...}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 01, 2017 Jun 01, 2017

Copy link to clipboard

Copied

Thanks for the tips. I managed to work it out and went with the code below.

var v = +event.value;

{if (v == 1)  

this.getField("Text803").fillColor = ["RGB",0.537,0.776,0];

else this.getField("Text803").fillColor = color.white;}

var v = +event.value;

{if (v == 1)

this.getField("Text804").fillColor = ["RGB",0.537,0.776,0];

else this.getField("Text804").fillColor = color.white;} 

var v = +event.value;

{if (v == 2)

this.getField("Text805").fillColor = ["RGB",0.537,0.776,0];

else this.getField("Text805").fillColor = color.white;} 

var v = +event.value;

{if (v == 2)

this.getField("Text806").fillColor = ["RGB",0.537,0.776,0];

else this.getField("Text806").fillColor = color.white;}

var v = +event.value;

{if (v == 3)

this.getField("Text807").fillColor = ["RGB",0.537,0.776,0];

else this.getField("Text807").fillColor = color.white;} 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 02, 2017 Jun 02, 2017

Copy link to clipboard

Copied

The correct syntax is to put the curly brackets after the if-condition. It works in your case because you only have one line of code associated with it, but it's not good practice. This is how it should look like:

var v = +event.value;

if (v == 1) {

    this.getField("Text803").fillColor = ["RGB",0.537,0.776,0];

} else {

    this.getField("Text803").fillColor = color.white;

}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 02, 2017 Jun 02, 2017

Copy link to clipboard

Copied

Do you see any duplication of statements?

the use of the "{" and "}" indicate a block or series of statements to be executed instead of just one statement.

Moving all the duplicated lines of code so it is only executed one time could give you a script like:

// default all field fill color to white;

this.getField("Text803").fillColor = color.white;
this.getField("Text804").fillColor = color.white;
this.getField("Text805").fillColor = color.white;
this.getField("Text806").fillColor = color.white;
this.getField("Text807").fillColor = color.white;

// change certain fields on this field's value;

var v = +event.value; 
if (v == 1) {
      this.getField("Text803").fillColor = ["RGB",  0.537, 0.776, 0];  
      this.getField("Text804").fillColor = ["RGB", 0.537,  0.776, 0]; 
}
if (v == 2) {
      this.getField("Text805").fillColor = ["RGB", 0.537, 0.776, 0];
      this.getField("Text806").fillColor = ["RGB", 0.537, 0.776, 0]; 
}
if (v == 3)  {
this.getField("Text807").fillColor = ["RGB", 0.537, 0.776, 0];

}

I would use the above script in the "On Blur" action so it only executes when the input field is changed and the user tabs out of the field.

To see the full effect you should turn off field highlighting in Acrobat's/Reader's preferences.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 26, 2019 May 26, 2019

Copy link to clipboard

Copied

i need light pink and light green can you help

var f = event.target;  
var fv = event.value;

if (fv == "Good") {
  f
.fillColor = color.green;
}
else if (fv == "Fair") {
  f
.fillColor = color.yellow;
}
else if (fv == "Poor") {
  f
.fillColor = color.red;
}
else {
  f
.fillColor = color.white;
}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 26, 2019 May 26, 2019

Copy link to clipboard

Copied

Do you know the RGB values for these colors?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 26, 2019 May 26, 2019

Copy link to clipboard

Copied

it does not work i tried

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 26, 2019 May 26, 2019

Copy link to clipboard

Copied

You did not answer my question, nor specified what you tried and what the results were. I can't help you if you don't provide basic information.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 26, 2019 May 26, 2019

Copy link to clipboard

Copied

sir i need color drop down list in PDF in color back ground

YES  as light green color.

NO   as light pink

Manager no as RED color.

var f = event.target;  
var fv = event.value;

if (fv == "YES") {
  f
.fillColor = color.green;
}
else if (fv == "NO") {
  f
.fillColor = color.yellow;
}
else if (fv == "Manager NO") {
  f
.fillColor = color.red;
}
else {
  f
.fillColor = color.white;
}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 26, 2019 May 26, 2019

Copy link to clipboard

Copied

In addition to what TSN said, where did you place the code? Does it work with the colors you have in it at the moment?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 27, 2019 May 27, 2019

Copy link to clipboard

Copied

its not working perfectly.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 27, 2019 May 27, 2019

Copy link to clipboard

Copied

What is not working?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 26, 2019 May 26, 2019

Copy link to clipboard

Copied

You did not answer the question. Do you know the RGB values for these colours? Please answer. Do not ignore any part of the reply.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 27, 2019 May 27, 2019

Copy link to clipboard

Copied

YES sir i know RGB colors

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 27, 2019 May 27, 2019

Copy link to clipboard

Copied

Ok, please post your attempted code with the RGB colours. We cannot guess what problem you are having. And please answer ALL THE QUESTIONS. Where did you place the code?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 27, 2019 May 27, 2019

Copy link to clipboard

Copied

i place below codes in combobox>>> properties>>>>vaildate

& its no working sir

all i want is combobox background colors for different selections i.e YES in green background & NO in RED background.

var f_color = color.white;

if (event.value === "NO") f_color = color.red;

if (event.value === "Manager NO") f_color = color.red;

if (event.value === "YES") f_color =color.green;

event.target.fillColor = f_color; 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 27, 2019 May 27, 2019

Copy link to clipboard

Copied

var f_color = color.white;

if (event.value === "NO") f_color = color.red;

if (event.value === "Manager NO") f_color = color.red;

if (event.value === "YES") f_color =color.green;

event.target.fillColor = f_color; 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 27, 2019 May 27, 2019

Copy link to clipboard

Copied

You said you wanted to use a light green and a light pink.

We asked if you had the RGB colours to use, and you said yes.

I asked to see the code using the colours, which had problems.

I am still trying to answer your first question.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 27, 2019 May 27, 2019

Copy link to clipboard

Copied

sir  our requirements  changes no RBG needed. i want  you help me.

How can i change my combobox/dropdown list background color change.

i have  YES    &   No in my dropdown list

i want YES in green back ground

& no in RED backround.

i want to know how.

Consider me as bigneer.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 27, 2019 May 27, 2019

Copy link to clipboard

Copied

That's not possible. You can't assign different colors to various options

in the field.

On Mon, May 27, 2019, 23:02 ihteshamu35126935 <forums_noreply@adobe.com>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 27, 2019 May 27, 2019

Copy link to clipboard

Copied

i have done it but it is not working on smartphone works great on pc color changed by different selection

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 27, 2019 May 27, 2019

Copy link to clipboard

Copied

Mobile devices do not have the full implementation of JavaScript and most of the implementation depends upon the platform and the app being used.

Adobe JavaScript API and Forms Mobile Devices

To know for sure if your form will work one needs to test on each mobile device and app.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines