If any checkboxes in a group are selected, show/hide a text field

Explorer ,
Jan 23, 2018 Jan 23, 2018

Copy link to clipboard

Copied

Hello, everyone;

I'm looking for help with a PDF form that I'm currently working on. I'm using Adobe Acrobat DC to build it. There's a section that has 18 checkboxes and my client would like for it to be a "choose all that apply" scenario (so multiple checkboxes can by selected). The idea is, when any of the checkboxes are selected, a text field labeled "Specify" will then be visible so the user can fill in specific details; otherwise, if none are selected, the text field will be hidden.

I've created if/else conditional scenarios that have individual checkboxes or even multiple checkboxes where the user can only select one but I haven't done it where it's a "select all that apply" scenario. I hope this makes some sense. I was looking into "for" loops for a minute but I wasn't able to follow it that much. I've seen the JavaScript necessary to accomplish this in HTML and tried to incorporate it but as I'm not that great of a JavaScript coder, trying to respect the differences between standard JavaScript and AcroForm JavaScript (from my limited experience - only a year and a half) has me confused.

Can anyone help me with an example that produces this result?

I really appreciate it.

TOPICS
Acrobat SDK and JavaScript, Windows

Views

1.4K

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

Adobe Community Professional , Jan 24, 2018 Jan 24, 2018
The example in the article shows how to use the checkbox mousup to show/hide fields, but, since you want any checkbox to show the text field there is another approach, which is to use a calculation script on the text field to determine when it should be shown.  So, if your fields are names as you'd shown above, Settings.# are then you could use this script. But it is important that the field names are set using this naming, not the export values. The export values should all be set to "Yes" for ...

Likes

Translate

Translate
Adobe Community Professional ,
Jan 23, 2018 Jan 23, 2018

Copy link to clipboard

Copied

First, here's an article that shows how to show and hide fields in Acrobat/Pdf:

https://acrobatusers.com/tutorials/show_hide_fields

Next, you can't group change field values, but you can group fields so they are easier to loop on.

Next, JavaScript is the same everywhere, PDF, HTML, etc.  It's the Document Object Model, which is how the JS is hooked into the application that changes.

Here are some videos that will help explain how Acrobat, PDF, and JavaScript all fit together.

Free Video Content & Full Listing of Available Videos

Thom Parker - Software Developer at PDFScripting
Use the Acrobat JavaScript Reference early and often

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
Explorer ,
Jan 24, 2018 Jan 24, 2018

Copy link to clipboard

Copied

Thank you!. Ok, so if I have checkboxes with different export values named "Settings.0" through "Settings.17" (18 fields) and wanted it set so that any of the checkboxes would show/hide one text field ("Specify Settings") when selected, how could I accomplish this on my form?

Maybe I haven't looked hard enough but I haven't seen any similar examples on the various sites that provide Acrobat support, code snippets, etc.

I really appreciate your help.

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
Adobe Community Professional ,
Jan 24, 2018 Jan 24, 2018

Copy link to clipboard

Copied

The example in the article shows how to use the checkbox mousup to show/hide fields, but, since you want any checkbox to show the text field there is another approach, which is to use a calculation script on the text field to determine when it should be shown.  So, if your fields are names as you'd shown above, Settings.# are then you could use this script. But it is important that the field names are set using this naming, not the export values. The export values should all be set to "Yes" for this to work.

Put this script on the Custom Calculation script on the text field that will be shown.

event.target.hidden = !this.getField("Settings").getArray().some(function(a){return (a.value == "Yes")});

Thom Parker - Software Developer at PDFScripting
Use the Acrobat JavaScript Reference early and often

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
Explorer ,
Jan 24, 2018 Jan 24, 2018

Copy link to clipboard

Copied

Wow, this is exactly what I was looking for. Thank you SO MUCH!

I'll definitely read the article over again because I'm pretty sure there are a couple ways to accomplish this. It's funny; for a brief second a couple weeks ago, I thought that the script would need to be in the text field but couldn't figure out what it needed to be. And there it is!!

Thanks again! I really appreciate your help.

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
Adobe Community Professional ,
Jan 24, 2018 Jan 24, 2018

Copy link to clipboard

Copied

If you'd like to learn more, then please check out our website, pdfscripting.com

Thom Parker - Software Developer at PDFScripting
Use the Acrobat JavaScript Reference early and often

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
Explorer ,
Jan 24, 2018 Jan 24, 2018

Copy link to clipboard

Copied

Thank you.

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 ,
Apr 18, 2018 Apr 18, 2018

Copy link to clipboard

Copied

I've noticed in these forums Thom, your responses are the most helpful, the links and examples you've provided have taught me a lot without having to post stupid questions!  (yes, that's blatant butt kissing)

I'm curious if you can hide the actual checkbox itself.  My form has options and checkboxes that would apply only if a certain condition is true, which can be ascertained simply with another text field having a value.  Any insight to link I could read up on?  TIA

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
Explorer ,
Apr 18, 2018 Apr 18, 2018

Copy link to clipboard

Copied

@Superman79765;

I'm working on some checkboxes in a form right now. You can hide them with "display.hidden" but the form might look better with the checkbox value cleared and the field set to readonly (as opposed to leaving the user with empty spaces where the checkboxes would be).

To hide the field:

checkbox.display = display.hidden;

To show the field:

checkbox.display = display.visible;

To set the field to readonly:

checkbox.readonly = true;

To turn readonly off:

checkbox.readonly = false;

Again, I usually clear the values when it is hidden or set to readonly, but that's just a preference:

checkbox.value = "";

There are ways to iterate through the form fields instead of doing them one by one but I'm not that advanced with scripting yet. I'll let some of the other more skilled coders point you in that direction. And I'm sure there are a plethora of resources out there that teach this stuff.

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
Explorer ,
Apr 18, 2018 Apr 18, 2018

Copy link to clipboard

Copied

Checkboxes set to visible:

screenshot_chk1.png

And set to readonly:

screenshot_chk2.png

As opposed to being set to hidden:

screenshot_chk3.png

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
Adobe Community Professional ,
Apr 18, 2018 Apr 18, 2018

Copy link to clipboard

Copied

Yes, you can hide a checkbox (or any field) based on just about anything available to the JS model.  One way to do this is to use a calculation script on a hidden text field (this is just a place to put a script, it has nothing to do with the text field).  Calculation scripts are run every time any field anywhere on the form is modified. This is both good and bad.  Its good because the script is always up to date with the latest field values, its bad because it runs all the time and may become a performance issue. But this methodology is necessary if hiding your checkbox depends on more than one field.

If the visibility of the checkbox only depends on a single field, then the hide/show code should go into the validate or format event for that field. 

An alternative to hiding/showing is to "gray out" (create a disabled appearance) the field. Here's an article on the topic:

https://acrobatusers.com/tutorials/js_disabling_fields

Thom Parker - Software Developer at PDFScripting
Use the Acrobat JavaScript Reference early and often

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 ,
Apr 18, 2018 Apr 18, 2018

Copy link to clipboard

Copied

Thom, one last easy question (with many thanks), I see the checkbox.display=display.hidden;.....and the principle I understand, how do I signify my specific checkbox?  is it   mycheckbox'sname.display?

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
Adobe Community Professional ,
Apr 18, 2018 Apr 18, 2018

Copy link to clipboard

Copied

LATEST

Read this article, it will explain all.

https://acrobatusers.com/tutorials/show_hide_fields

Thom Parker - Software Developer at PDFScripting
Use the Acrobat JavaScript Reference early and often

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