Change Color of text field based on radio button selection

[Sivesh24451536dvwd]

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]

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

[Sivesh24451536dvwd]

I also have to calculate scores based on the selection of these radio buttons, so I've renamed radio buttons to scores in every group, in group 1 I named "Yes - 5" for No - 0, same in group 2, for "Yes - 4" for No - (-3), and so on.

Is there any other way to link the calculation?

Also, I want to show the calculation only after the Last selection.

[Sivesh24451536dvwd]

My main aim is, I have a quiz with options "yes" and "No". based on their answers scores are given for each question. I want to show the scores at the end without knowing their individual scores. Also, I want to turn the radio button red If "No" is selected, and if they change their answer to "YES" then it should be as it is.

[Thom Parker]

Is the export value for one of the Yes button the exact text "Yes - 5"?  Or do you mean the export values are all numbers?  Are the No buttons always "0"? 

In order to write code we need exact and clearly stated information.  What are the fields named and what are the export values.  

[Sivesh24451536dvwd]

The Field name for "Yes" is a number that is 5,4,3,1 these four values are also the marks for that question. In order to calculate the marks I've named the Yes and No buttons as numbers. For "No" 0, -1 & -3, have been used.

For example, in the screenshot attached below - In group 18, for "Yes" the field name is " 5 " and for "No" the field name is " -2 "

Similarly in group 19, for "Yes" the field name is " 5 " and for "No" the field name is " -1 ".

[Thom Parker]

The screen shot shows that the field names are "Group#", which is the default, and the export values are numbers. This terminology is important. Without it, we don't know what you are talking about. 

Here's an article that covers the basics on Radio buttons:

https://www.pdfscripting.com/public/Checkboxes-and-Radio-Buttons.cfm

The important part here is that a No button has an export <=0, and a Yes button has an export > 0.  Since you want code that distinquishes between the Yes and No buttons, it is critically important to have a way to distinquish between the Yes and No buttons. And now we have that.

You would be better served to give the radio button groups more descriptive names, but we can work with what you have. 

Here's a modification of the previous code I provided. This code assumes that all of your radio button groups of interest are named "Group#", and that all No buttons have an export that is a number <=0;

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 propertly for this code to work
    for(var i=1;i<40;i++)
        this.getField("Group"+ i).fillColor = ["T"];
}

[Sivesh24451536dvwd]

This works but It turns transparent as I move to the next question. I want it to stay red, If No is selected.

[Thom Parker]

That should not be happening.  Try removing the "else" part of the "if".

Can you post the form?  There is probably some other action interfering with the code.

[Sivesh24451536dvwd]

I can email it to you. What's your email address?

[Thom Parker]

You should be able to attach it to a post. But you can also message me through this forum, or email me at support@windjack.com.

[Sivesh24451536dvwd]

I've attached a copy of the form.

[Thom Parker · Accepted solution]

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

[Sivesh24451536dvwd]

There is a total of 37 Radio Button Groups. Where should I enter this value?

[Thom Parker]

At the bottom of the script is a loop for setting all the radio button backgrounds to transparent 

// ** Fill in the loop limits properly for this code to work
    var oFld;
    for(var i=1;i<24;i++){

The limits on this loop are from 1 to 24.  This will cover the fields from "Pallet1" to "Pallet24".  If the radio buttons go to "Pallet37", then the top limit of the loop should be 37.