Change Color of text field based on radio button selection

Question

I have two radio buttons in one group, i.e. "Yes" & "No"; overall, there are more than 40 groups. I want to change the color of the "No" field to red if "No" is selected and It should be as it is if  "Yes" is selected. It should change based on the answer and reset when the form is reset.

Thom Parker · Accepted Answer

I've attached a copy of the form.

So first, you didn't modify the script as per the instructions, i.e. change the loop parameters in the "reset" portion of the validation script to fit the number of radio button groups on your form.

It is this part of the script that is clearing out the color, and it shouldn't be called by just tabbing or clicking between fields. But here is a modification that will handle this situation.

if(event.source)
{// Detect value change in a field
   var aMatches = /^(Group)(\d+)$/.exec(event.source.name);
   if(aMatches[1] == "Group")
   { // Field that changed is one of the radio buttons
     // Find the widge number for the one "No" button
	var nWidgeNum = 0;
	event.source.exportValues.some(function(a,i){return (Number(a) <= 0) && ((nWidgeNum = i) || 1);});
      // Set the background color for the "No" button only
	this.getField(event.source.name + "." + nWidgeNum).fillColor = (Number(event.source.value) <= 0)?color.red:["T"];
   }
}
else
{// Detect general change event with no source. Possible reset
    // Set background of all radio buttons in group to transparent
    // ***** Without knowing how many buttons there are this is problematic
    // ** Fill in the loop limits properly for this code to work
    var oFld;
    for(var i=1;i<24;i++){
        oFld = this.getField("Group"+ i);
        if(oFld && (oFld.value == "Off"))
            oFld.fillColor = ["T"];
   }
}

Thom Parker · Answer

The most efficient way to do this is to use a calculation script on a hidden text field. Calculations scripts are called every time any field on the form is changed.

To make this scheme work the names of the radio button fields must follow a consistent naming convention.

For example, "RadioButton.Group1", "RadioButton.Group2", etc.

Here's a calculation script that will work, based on the suggested naming. It also assumes the export values for the radio buttons are "Yes" and "No"

if(event.source)
{// Detect value change in a field
   var aNameParts = event.source.name.split(".");
   if(aNameParts[0] == "RadioButton")
   { // Field that changed is one of the radio buttons
     // Find the widge number for the one "Yes" button
	var nWidgeNum = 0;
	event.source.exportValues.some(function(a,i){return (a == "Yes") && ((nWidgeNum = i) || 1);});
      // Set the background color for the "Yes" button only
	this.getField(event.source.name + "." + nWidgeNum).fillColor = (event.source.value == "Yes")?color.red:["T"];
   }
}
else
{// Detect general change event with no source. Possible reset
    // Set background of all radio buttons in group to transparent
    this.getField("RadioButton").getArray().forEach(function(a){a.fillColor = ["T"];});
}

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded