Highlighted

Different fill colors for same name Check Boxes

New Here ,
Aug 24, 2020

Copy link to clipboard

Copied

I'm new to building forms and using JavaScript.

I have two check boxes in my form. Both with the same name because I don't want users to be able to check both. One with an export value of Yes and One with an export value of No.  I simply want the fill color of one to be green when checked and the other to be yellow when checked. I don't want them to be green and yellow constantly as they would if I set their fill color in the appearance tab.

I can use the following JavaScript, which works, but since the boxes are the same name it turns both boxes the same color.

if(event.target.isBoxChecked(0))
{event.target.fillColor = color.green;}else event.target.fillColor = color.white;

I'm sure I am missing an easy solution. Or maybe not?  Any help would be appreciated.

Most Valuable Participant
Correct answer by try67 | Most Valuable Participant

"CheckBox1" is what we assumed your field is called, since you never really said what it was... The ".0" and ".1" part of it is the way you refer to the individual widgets in the field group. You need to adjust the code and insert into it the actual field name you're using (or use event.target.name, instead, but still keeping the ".0" and ".1" parts!) and apply it as the MouseUp event of BOTH widgets, and it should work as you've described.

TOPICS
PDF forms

Views

83

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

Different fill colors for same name Check Boxes

New Here ,
Aug 24, 2020

Copy link to clipboard

Copied

I'm new to building forms and using JavaScript.

I have two check boxes in my form. Both with the same name because I don't want users to be able to check both. One with an export value of Yes and One with an export value of No.  I simply want the fill color of one to be green when checked and the other to be yellow when checked. I don't want them to be green and yellow constantly as they would if I set their fill color in the appearance tab.

I can use the following JavaScript, which works, but since the boxes are the same name it turns both boxes the same color.

if(event.target.isBoxChecked(0))
{event.target.fillColor = color.green;}else event.target.fillColor = color.white;

I'm sure I am missing an easy solution. Or maybe not?  Any help would be appreciated.

Most Valuable Participant
Correct answer by try67 | Most Valuable Participant

"CheckBox1" is what we assumed your field is called, since you never really said what it was... The ".0" and ".1" part of it is the way you refer to the individual widgets in the field group. You need to adjust the code and insert into it the actual field name you're using (or use event.target.name, instead, but still keeping the ".0" and ".1" parts!) and apply it as the MouseUp event of BOTH widgets, and it should work as you've described.

TOPICS
PDF forms

Views

84

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
Aug 24, 2020 0
Most Valuable Participant ,
Aug 24, 2020

Copy link to clipboard

Copied

To do it you would need to access the individual widget, which event.target doesn't do. So you would need to use something like this:

this.getField("CheckBox1.0").fillColor = (this.getField("CheckBox1").value=="Yes") ? color.green : color.transparent;

this.getField("CheckBox1.1").fillColor = (this.getField("CheckBox1").value=="No") ? color.yellow : 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
Reply
Loading...
Aug 24, 2020 1
Adobe Community Professional ,
Aug 24, 2020

Copy link to clipboard

Copied

Brilliant! Always so concise and to the point.

 

This was also working for me:

 

 

  • In one checkbox  using this:
var f = this.getField("myCheckBox");

if (f.isBoxChecked(0)) {this.getField(f.name+".0").fillColor= color.green; this.getField(f.name+".1").fillColor= color.white;}

else this.getField(f.name+".0").fillColor= color.white;

 

  •  and in the other checkbox using this:

 

var f = this.getField("myCheckBox");

if (f.isBoxChecked(1)) {this.getField(f.name+".1").fillColor= color.yellow; this.getField(f.name+".0").fillColor= color.white;}

else this.getField(f.name+".1").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
Reply
Loading...
Aug 24, 2020 0
New Here ,
Aug 24, 2020

Copy link to clipboard

Copied

Unfortunately it's not that clear to me.  Sorry to waste your time. Either I'm not understanding or I wasn't clear as to what I was trying to do.

I only have 2 check boxes. They are named the same name so they can't both be checked. Not that it matters but one box means the person is Available and the other box means they are Unavailable. If the user checks the Available check box I want it to have a check mark and be filled in green.  If they check the Unavailable check box I want it to have an "X" and be filled with yellow.

I guess I am confused because the above mentions using CheckBox1.0 and CheckBox1.1.  Do I just not understand the syntax?  Sorry.  I have tried using this several different ways but still have had no success.

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
Reply
Loading...
Aug 24, 2020 0
Most Valuable Participant ,
Aug 24, 2020

Copy link to clipboard

Copied

"CheckBox1" is what we assumed your field is called, since you never really said what it was... The ".0" and ".1" part of it is the way you refer to the individual widgets in the field group. You need to adjust the code and insert into it the actual field name you're using (or use event.target.name, instead, but still keeping the ".0" and ".1" parts!) and apply it as the MouseUp event of BOTH widgets, and it should work as you've described.

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
Reply
Loading...
Aug 24, 2020 0
New Here ,
Aug 24, 2020

Copy link to clipboard

Copied

That worked perfectly.  Thank you all for your patience and help.  Greatly appreciated.

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
Reply
Loading...
Aug 24, 2020 0
Engaged ,
Aug 24, 2020

Copy link to clipboard

Copied

Here is 3rd way that works for me but in my case need 2 diff names but does same job:

for "checkbox1":
if(event.target.isBoxChecked(0)){
event.target.fillColor = color.green
this.getField("checkbox2").checkThisBox(0,false)
this.getField("checkbox2").fillColor = color.transparent;
}
and for "checkbox2":
if(event.target.isBoxChecked(0)){
event.target.fillColor = color.yellow
this.getField("checkbox1").checkThisBox(0,false)
this.getField("checkbox1").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
Reply
Loading...
Aug 24, 2020 1