Skip to main content
Inspiring
January 23, 2018
Answered

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

  • January 23, 2018
  • 1 reply
  • 5363 views

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.

This topic has been closed for replies.
Correct answer Thom Parker

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

1 reply

Thom Parker
Community Expert
Community Expert
January 23, 2018

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 PDFScriptingUse the Acrobat JavaScript Reference early and often
Inspiring
January 24, 2018

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.

Thom Parker
Community Expert
Thom ParkerCommunity ExpertCorrect answer
Community Expert
January 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 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 PDFScriptingUse the Acrobat JavaScript Reference early and often