Javascript for checkboxes and text fields

New Here ,
Dec 01, 2020

Copy link to clipboard

Copied

Hello,

 

I have 6 checkboxes that I want to determine the fill color of certain text fields. 

 

When I check the checkboxes, I want the text field that is to the right of the check box and the text fields under New Part Number, REF. P/N, and Desription to all be filled green as shown below.

 

Capture6.PNG

Now if I uncheck one of the checkboxes, I want ONLY the text field to the right of the unchecked box to fill transparent as shown below

 

Capture4.PNGWith the code that I am running now, I run into the issue of the text fields under New Part Number, REF. P/N, and Desription to also turn transparent when I uncheck one of the boxes as shown below

 

Capture3.PNG

I want all of the text fields to turn transparent ONLY when ALL of the checkboxes are unchecked as shown below

 

Capture5.PNG

This is the code that I am running in the mouse up in each checkbox (red if/else changes based on the text field that it is next to):

 

Capture.PNG

if(event.target.value != "Off")

this.getField("PN1-4").fillColor = color.green;

else

this.getField("PN1-4").fillColor = color.transparent;

if(event.target.value != "Off")

this.getField("PN1-1").fillColor = color.green;

else

this.getField("PN1-1").fillColor = color.transparent;

if(event.target.value != "Off")

this.getField("PN1-2").fillColor = color.green;

else

this.getField("PN1-2").fillColor = color.transparent;

if(event.target.value != "Off")

this.getField("PN1-3").fillColor = color.green;

else

this.getField("PN1-3").fillColor = color.transparent;

You can try something like this for first checkbox and modify names for other checkboxes:

 

if(event.target.value != "Off"){
this.getField("PN1-4").fillColor = color.green;
this.getField("PN1-1").fillColor = color.green;
this.getField("PN1-2").fillColor = color.green;
this.getField("PN1-3").fillColor = color.green;}
else if(this.getField("Check Box1").value == "Off" && this.getField("Check Box2").value == "Off" && this.getField("Check Box3").value == "Off" && this.getField("Check Box4").value == "Off" && this.getField("Check Box5").value == "Off" && this.getField("Check Box6").value == "Off"){
this.getField("PN1-1").fillColor = color.transparent;
this.getField("PN1-2").fillColor = color.transparent;
this.getField("PN1-3").fillColor = color.transparent;
this.getField("PN1-4").fillColor = color.transparent;}
else if(event.target.value == "Off"){
this.getField("PN1-4").fillColor = color.transparent;}

 

TOPICS
Acrobat SDK and JavaScript, Create PDFs, How to, PDF forms

Views

44

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

Javascript for checkboxes and text fields

New Here ,
Dec 01, 2020

Copy link to clipboard

Copied

Hello,

 

I have 6 checkboxes that I want to determine the fill color of certain text fields. 

 

When I check the checkboxes, I want the text field that is to the right of the check box and the text fields under New Part Number, REF. P/N, and Desription to all be filled green as shown below.

 

Capture6.PNG

Now if I uncheck one of the checkboxes, I want ONLY the text field to the right of the unchecked box to fill transparent as shown below

 

Capture4.PNGWith the code that I am running now, I run into the issue of the text fields under New Part Number, REF. P/N, and Desription to also turn transparent when I uncheck one of the boxes as shown below

 

Capture3.PNG

I want all of the text fields to turn transparent ONLY when ALL of the checkboxes are unchecked as shown below

 

Capture5.PNG

This is the code that I am running in the mouse up in each checkbox (red if/else changes based on the text field that it is next to):

 

Capture.PNG

if(event.target.value != "Off")

this.getField("PN1-4").fillColor = color.green;

else

this.getField("PN1-4").fillColor = color.transparent;

if(event.target.value != "Off")

this.getField("PN1-1").fillColor = color.green;

else

this.getField("PN1-1").fillColor = color.transparent;

if(event.target.value != "Off")

this.getField("PN1-2").fillColor = color.green;

else

this.getField("PN1-2").fillColor = color.transparent;

if(event.target.value != "Off")

this.getField("PN1-3").fillColor = color.green;

else

this.getField("PN1-3").fillColor = color.transparent;

You can try something like this for first checkbox and modify names for other checkboxes:

 

if(event.target.value != "Off"){
this.getField("PN1-4").fillColor = color.green;
this.getField("PN1-1").fillColor = color.green;
this.getField("PN1-2").fillColor = color.green;
this.getField("PN1-3").fillColor = color.green;}
else if(this.getField("Check Box1").value == "Off" && this.getField("Check Box2").value == "Off" && this.getField("Check Box3").value == "Off" && this.getField("Check Box4").value == "Off" && this.getField("Check Box5").value == "Off" && this.getField("Check Box6").value == "Off"){
this.getField("PN1-1").fillColor = color.transparent;
this.getField("PN1-2").fillColor = color.transparent;
this.getField("PN1-3").fillColor = color.transparent;
this.getField("PN1-4").fillColor = color.transparent;}
else if(event.target.value == "Off"){
this.getField("PN1-4").fillColor = color.transparent;}

 

TOPICS
Acrobat SDK and JavaScript, Create PDFs, How to, PDF forms

Views

45

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
Dec 01, 2020 0
Adobe Community Professional ,
Dec 01, 2020

Copy link to clipboard

Copied

Hi,

 

You need to add checks for all the other in the else part (so the code in PN1-4) would be something like

 

if(event.target.value != "Off") {
this.getField("PN1-4").fillColor = color.green;
this.getField("PN1-1").fillColor = color.green;
this.getField("PN1-2").fillColor = color.green;
this.getField("PN1-3").fillColor = color.green;
}
else if ( this.getField("PN1-5").value == "off" && this.getFIeld("PN1-6").value == "off" && this.getField("PN1-7").value == "off" && this.getFIeld("PN1-8").value == "off" &&
this.getField("PN1-5").value == "off" ) { 
this.getField("PN1-4").fillColor = color.transparent;
this.getField("PN1-1").fillColor = color.transparent;
this.getField("PN1-2").fillColor = color.transparent;
this.getField("PN1-3").fillColor = color.transparent;
}

 

I haven't been able to check this, but that should be a good starting point, you want to check all the fields in your checkbox area to make sure none of the are checked, if any are checked then you leave the colour.

 

This could be moved to a document level script to save coding so much, let me know if that would help. If you could share the document for this, then I can make the changes and get it back to you.

 

Hope this helps

 

Malcolm

 

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...
Dec 01, 2020 1
Adobe Community Professional ,
Dec 01, 2020

Copy link to clipboard

Copied

Where does you change the fill color of the fields under New Part Number, REF. P/N, and Desription?

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...
Dec 01, 2020 0
Enthusiast ,
Dec 01, 2020

Copy link to clipboard

Copied

You can try something like this for first checkbox and modify names for other checkboxes:

 

if(event.target.value != "Off"){
this.getField("PN1-4").fillColor = color.green;
this.getField("PN1-1").fillColor = color.green;
this.getField("PN1-2").fillColor = color.green;
this.getField("PN1-3").fillColor = color.green;}
else if(this.getField("Check Box1").value == "Off" && this.getField("Check Box2").value == "Off" && this.getField("Check Box3").value == "Off" && this.getField("Check Box4").value == "Off" && this.getField("Check Box5").value == "Off" && this.getField("Check Box6").value == "Off"){
this.getField("PN1-1").fillColor = color.transparent;
this.getField("PN1-2").fillColor = color.transparent;
this.getField("PN1-3").fillColor = color.transparent;
this.getField("PN1-4").fillColor = color.transparent;}
else if(event.target.value == "Off"){
this.getField("PN1-4").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...
Dec 01, 2020 1
try67 LATEST
Most Valuable Participant ,
Dec 01, 2020

Copy link to clipboard

Copied

So you placed the full code under one check-box, or just the red part? Can you share the file in question with us?

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...
Dec 01, 2020 0