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

[Craig22304618iz91]

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".

[Thom Parker]

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;

[Craig22304618iz91]

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? 

[Thom Parker]

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

[Craig22304618iz91]

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?

[Thom Parker]

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

[Craig22304618iz91]

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?

[Thom Parker]

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".

[Craig22304618iz91]

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.   

[Thom Parker]

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

[Craig22304618iz91]

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?

[try67]

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

[Thom Parker · Accepted solution]

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

[Craig22304618iz91 · Accepted solution]

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

[Thom Parker]

Excellent, how about marking a best answer.