Change color of radio button after selection

New Here ,
Jul 12, 2021 Jul 12, 2021

Copy link to clipboard

Copied

I have a radio button named PF T5 STEP A with three choices of Pass Fail N/A.  I am trying to have the background color of all three choices to be red by default and when one of the choices are selected, all three choices turn white.  I am fairly new to javascript and have looked for any other posts with something like this and I can't find anything I can try to manipulate to what I need.  Appriciate any help.

TOPICS
JavaScript , PDF forms

Views

1.2K

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 , Jul 12, 2021 Jul 12, 2021

There is couple of ways to achive that. If you won't be reseting radio buttons then set them to be red manually and put this code as "Mouse UP" -> "Run javascript" under "Action" tab in all 3 buttons:

event.target.fillColor = color.white;

 

If you will be reseting buttons or you want to automate process, create text field and make it hidden then put this script in text field under "Calculate" tab -> "Custom calculation script":

this.getField("PF T5 STEP A").fillColor = this.getField("PF T5 STEP

...

Likes

Translate

Translate
Adobe Employee ,
Jul 12, 2021 Jul 12, 2021

Copy link to clipboard

Copied

Hi Lyle_Worsley

 

Hope you are doing well and sorry for the trouble. As described you want to change the background color of the radio buttons when selected.

 

The workflow that you are trying to achieve is possible using the JavaScript. For more information please check the help page https://acrobatusers.com/tutorials/javascript_console/

 

Hope it will help

 

Regards

Amal

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 ,
Jul 12, 2021 Jul 12, 2021

Copy link to clipboard

Copied

There is couple of ways to achive that. If you won't be reseting radio buttons then set them to be red manually and put this code as "Mouse UP" -> "Run javascript" under "Action" tab in all 3 buttons:

event.target.fillColor = color.white;

 

If you will be reseting buttons or you want to automate process, create text field and make it hidden then put this script in text field under "Calculate" tab -> "Custom calculation script":

this.getField("PF T5 STEP A").fillColor = this.getField("PF T5 STEP A").value == "Off" ? color.red : 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
New Here ,
Jul 14, 2021 Jul 14, 2021

Copy link to clipboard

Copied

Thank you Nesa.  Both your solutions worked!  The code with the ability to reset is the option I needed.

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 ,
Dec 27, 2021 Dec 27, 2021

Copy link to clipboard

Copied

Dear Nesa,

I have a radio button group with 2 tick boxes with values "yes" and "no"

If the yes-box is ticket I want it go green if the no-box is ticked it should go red.

I need to connect the values to the colours. How can it be done, I wonder

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 ,
Dec 27, 2021 Dec 27, 2021

Copy link to clipboard

Copied

Lets say your radio buttons are named "Group1", as 'Mouse UP' event of "yes" button use this:

var y = this.getField("Group1.0");
var n = this.getField("Group1.1");
if(event.target.value == "yes"){
y.fillColor = color.green;
n.fillColor = color.transparent;}

 

and for "no" button use this:

var y = this.getField("Group1.0");
var n = this.getField("Group1.1");
if(event.target.value == "no"){
n.fillColor = color.red;
y.fillColor = color.transparent;}

 

If you will be reseting buttons by some other means (button field...etc) in that case color will remain and I suggest you use script in that button to also reset color:

this.getField("Group1").fillColor = color.transparent;

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 ,
Dec 27, 2021 Dec 27, 2021

Copy link to clipboard

Copied

LATEST

it also works when I just assign red to one button and green to the other 🙂

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