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

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

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
14.5K
Translate
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;

}

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

Change:

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

To:

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

Translate
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

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

Translate
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

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 {...}

Translate
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

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

Translate
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

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;

}

Translate
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

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.

Translate
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

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

Translate
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

Do you know the RGB values for these colors?

Translate
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

it does not work i tried

Translate
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

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.

Translate
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

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

Translate
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

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?

Translate
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

its not working perfectly.

Translate
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

What is not working?

Translate
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

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.

Translate
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

YES sir i know RGB colors

Translate
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

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?

Translate
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

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; 

Translate
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

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; 

Translate
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

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.

Translate
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

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.

Translate
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

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>

Translate
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

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

Translate
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

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.

Translate
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