• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Show/Hide Multiple Field Groups In Progression Based on Dropdown Box Selection

Explorer ,
Jan 09, 2023 Jan 09, 2023

Copy link to clipboard

Copied

I think my question on a previous thread got buried. The answer I need has also changed slightly so I'm starting a new thread in hopes that I'm able to get clarification.

I have a dropdown with 10 options, but I need the number of field groups to become visible based off of the user's selected number in the dropbox. For example, if "1" is selected from the dropdown, then I need all the fields in field group "SDP1" to be visible and the other 9 groups to be hidden. If "2" is selected, then I need all fields in groups "SDP1" and "SDP2" to be visible while the other 8 groups are hidden. If "3" is selected, then I need all fields in groups "SDP1", "SDP2", and "SDP3" to be visible while the other 7 groups are hidden. I need this progression all the way up through "SDP10".

TOPICS
Acrobat SDK and JavaScript

Views

1.1K

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 2 Correct answers

Community Expert , Jan 26, 2023 Jan 26, 2023

Arrg!! Second time I've done that. 

Here's the fix:

//First hide all field groups
var nIdx = Number(event.value);
if(!isNaN(event.value) && (nIdx > 0)){
   for(var i=1;i<=10;i++){
      this.getField("SDP." + i).getArray().forEach(function(a){a.display = (nIdx <= i)?display.visible:display.hidden});
   }
}

Votes

Translate

Translate
Explorer , Jan 27, 2023 Jan 27, 2023

This is awesome! I changed "(nIdx <= i)" to "(nIdx >= i)" and now it works perfectly. I really appreciate your time and effort you put into helping me.Thank you

Votes

Translate

Translate
Community Expert ,
Jan 09, 2023 Jan 09, 2023

Copy link to clipboard

Copied

Read this article

https://www.pdfscripting.com/public/Hiding-and-Showing-Form-Fields.cfm?sd=40

 

Use a validation script on the dropdown to perform the action:

 

For Example

 

//First hide all field groups
for(var i=1;i<=10;i++)
   this.getField("SDP" + i).display = display.hidden;

var nIdx = Number(event.valueAsString);
if(!isNaN(event.valueAsString) && (nIdx > 0))
   this.getField("SDP" + nIdx).display = display.visible;
Thom Parker - Software Developer at PDFScripting
Use the Acrobat JavaScript Reference early and often

Votes

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 17, 2023 Jan 17, 2023

Copy link to clipboard

Copied

Hi Thom. Thanks for the help. I put the script you provided into the "Run custom validation script" and selected the "Commit selected value imediately" box in the dropdown menu. My field names are SDP.1.Title, SDP.1.Cur, SDP.2, etc. I read the link you provided and it was very helpful, but it's still not working. Is there someting that needs to be done in the fields? What am I missing? 

Votes

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
Community Expert ,
Jan 17, 2023 Jan 17, 2023

Copy link to clipboard

Copied

So the first thing to do when somethings not working, is to look in the console window to see if any errors are reported. 

In this case an "InvalidGetError" would have been reported.  

So when you post about something not working the first thing you should do is describe how it's not working. Is there a change or not? If there is a change, then what is it. And restate the expected behavior. Then post any errors messages. 

 

Here's the corrected code. I did not include an important bit, i.e., the iteration over the fields in the group. This is not always necessary, but in this case it is.  

 

 

 

//First hide all field groups
for(var i=1;i<=10;i++)
   this.getField("SDP" + i).getArray().forEach(function(a){a.display = display.hidden});

var nIdx = Number(event.valueAsString);
if(!isNaN(event.valueAsString) && (nIdx > 0))
   this.getField("SDP" + nIdx).getArray().forEach(function(a){a.display = display.visible});

 

 

 

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

Votes

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 18, 2023 Jan 18, 2023

Copy link to clipboard

Copied

Thank you. I input the last script you gave me and there was no change. I used the console and this was the response I got: 

ReferenceError: nIdx is not defined

1:Console:Exec
undefined
TypeError: this.getField(...) is null
2:Field:Validate

TypeError: this.getField(...) is null

I have the options on the dropdown menu as 0, 1, 2, etc. with 0 being the default selection. Do they need to be renamed? Should there be an export value?

Votes

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
Community Expert ,
Jan 18, 2023 Jan 18, 2023

Copy link to clipboard

Copied

The first error is a reference to something you did in the console window, so it's not relavant. Please clear the console before doing a test.

 

The second two errors are telling you the field name is incorrect.  Details are important. You need to check over the code to make sure it's using correct values, like the field names.  Looks like the generated SDP field name is missing a "."

 

Here's the correction. 

//First hide all field groups
for(var i=1;i<=10;i++)
   this.getField("SDP." + i).getArray().forEach(function(a){a.display = display.hidden});

var nIdx = Number(event.valueAsString);
if(!isNaN(event.valueAsString) && (nIdx > 0))
   this.getField("SDP." + nIdx).getArray().forEach(function(a){a.display = display.visible});

 

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

Votes

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 23, 2023 Jan 23, 2023

Copy link to clipboard

Copied

I tried it again and didn't get a response. I watched your video on how to use the console to make sure I am using it correctly. The console indicated "undefined". Is there a field property I'm missing?

Votes

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
Community Expert ,
Jan 23, 2023 Jan 23, 2023

Copy link to clipboard

Copied

The "undefined" return doesn't necessarily indicate an error. So there are no specific errors being reported for the code. But what is reporting the "undefined"?  Did you put a console.println in the code?   

 

There are two parts to the script.  You'll want to check each part separately.

The first part hides all the "SPD" fields. Is the script doing this? This code can be run from the console window for testing purposes. 

 

The second part uses the selected index to unhide a specific field. This part of the code contains an error. There is no "event.valueAsString" property. Change this to "event.value".

 

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

Votes

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 23, 2023 Jan 23, 2023

Copy link to clipboard

Copied

I made your suggested change. The individual field groups now display based on the number selected in the dropdown. If I select "1", then SDP.1.TITLE and SDP.1.CUR display. If I select "2", SDP.2.TITLE and SDP.2.CUR display, but SDP.1.TITLE and SDP.1.CUR become hidden. Only the field groups associated with the numbers display, while the others are hidden. I need a selection of "2" from the dropdown to show field groups 1 and 2 while groups 3-10 are hidden, a selection of "3" to display field groups 1, 2, 3 while groups 4-10 are hidden, etc. 

I ran each script separately in the console and got "undefined" for each. How can it be undefined if it is functioning?

Also, I appreaciate your time in helping me with this. Thank you.   

Votes

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
Community Expert ,
Jan 23, 2023 Jan 23, 2023

Copy link to clipboard

Copied

The "undefined" display simply means there was no value returned from the operation. For example, variable declarations have no return value. 

 

So now you need a more complicated action. Ironically, the solution is a slightly simpler script, because it's a combination of the two. 

 

//First hide all field groups
var nIdx = Number(event.valueAsString);
if(!isNaN(event.valueAsString) && (nIdx > 0)){
   for(var i=1;i<=10;i++){
      this.getField("SDP." + i).getArray().forEach(function(a){a.display = (nIdx <= i)?display.visible:display.hidden});
   }
}

 

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

Votes

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 26, 2023 Jan 26, 2023

Copy link to clipboard

Copied

Hi Thom, 

The dropdown stopped displaying any of the fields with the new recommendation. The console indicated the following

"SyntaxError: syntax error
1:Console:Exec
undefined"

Does that mean there's a string that is not closed or is it something else?

Votes

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
Community Expert ,
Jan 26, 2023 Jan 26, 2023

Copy link to clipboard

Copied

It could mean a lot of things... Post your full code for help.

However, there is an error in the code above. The event object doesn't have a valueAsString property, only value, so change all instances of:

event.valueAsString

To:

event.value

Votes

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
Community Expert ,
Jan 26, 2023 Jan 26, 2023

Copy link to clipboard

Copied

Arrg!! Second time I've done that. 

Here's the fix:

//First hide all field groups
var nIdx = Number(event.value);
if(!isNaN(event.value) && (nIdx > 0)){
   for(var i=1;i<=10;i++){
      this.getField("SDP." + i).getArray().forEach(function(a){a.display = (nIdx <= i)?display.visible:display.hidden});
   }
}
Thom Parker - Software Developer at PDFScripting
Use the Acrobat JavaScript Reference early and often

Votes

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 27, 2023 Jan 27, 2023

Copy link to clipboard

Copied

This is awesome! I changed "(nIdx <= i)" to "(nIdx >= i)" and now it works perfectly. I really appreciate your time and effort you put into helping me.Thank you

Votes

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
Community Expert ,
Jan 27, 2023 Jan 27, 2023

Copy link to clipboard

Copied

LATEST

Excellent, how about marking a best answer.

 

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

Votes

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