Grey out fields dependent on drop down list

[GatsbyNZ]

Can anyone please help me with this form?

I have a drop-down list on the right hand as you can see, what I want to achieve is when users choose any of the first 4 items on that list, the whole area covering 13a to 13e will gray out, and when users choose the last two items on the list, the right-hand area 14a-14e will gray out.

I am thinking about creating two large text fields to cover the two corresponding areas, but I don't really know how to change the transparency of the fields and how to use the scripts to hide the fields.

Appreciate anyone who can help me out.

Many thanks.

[Nesa Nurani]

Do you want to hide an entire section or just set fields in that section to read only?

If latter, write field names for each section.

[GatsbyNZ]

Hi Nesa,

Not to hide (all of the words still need to be there), and not read-only either. I just want the whole section to be grayed out. like putting a layer of 20% grey over it (I know the layer control won't do, because I cannot save them with the document).

Alternatively, every field in the section can have strikethrough, which may be even harder to achieve.

Thanks.

[Nesa Nurani]

You can achieve that with 'Comment' tool by drawing a rectangle on the section you wish to grey out, and selecting grey for 'Fill' color and setting transparency to 20% in comment properties. Then you can use script to show/hide that rectangle.

[GatsbyNZ]

thanks, can you please give me a hint at how to start the script by the screenshot I put on the post? Appreciate your help!

[Nesa Nurani]

You can use script like this as 'Validate' of dropdown field:

var e = event.value;
this.getAnnot(0,"Your annot name goes here").hidden = e=="INSPECTED/TESTED"||e=="REPAIRED"||e=="OVERHAULED"||e=="MODIFIED" ? false : true;

Once you placed comments to find your annot name, select your annot and press CTRL+J to open console,
now in console paste this code:
this.selectedAnnots[0].name;
and press Enter to get name, now copy that name and put it into code where says "Your annot name goes here".

[try67]

It's actually not a good idea to create a comment over areas that have fields, as they could interfere with one another. I would simply change the fill color of the fields directly (although you'd need to disable the fields highlighting feature to see the results).

To do that you can use something like this code as the custom Validation script of the drop-down:

var fields = ["Text1", "Text2", "Text3"]; // replace with actual field names
for (var i in fields) {
	var f = this.getField(fields[i]);
	f.fillColor = (event.value=="NEW") ? color.ltGray : color.white;
}

[GatsbyNZ]

Thanks for replying.

Can you please elaborate on the script a bit more?

The "Text1" "Text2" "Text3" "Text4" "Text5" "Text6" "Text7" and "Text8" . are the fields I am about to deal with.

I have "Option1" "Option2" in the drop-down list for users to choose.

How can I come up with the script so that when choosing option 1, Text1-4 get grayed out, but not Text 5-8

And when choosing option 2, Text 5-8 get grayed out, but not Text 1-4.

Appreciate your help with it.

Many thanks.

[try67]

Like this:

var fields1 = ["Text1", "Text2", "Text3", "Text4"];
var fields2 = ["Text5", "Text6", "Text7", "Text8"];
for (var i in fields1) {
	var f = this.getField(fields1[i]);
	f.fillColor = (event.value=="Option1") ? color.ltGray : color.white;
}
for (var i in fields2) {
	var f = this.getField(fields2[i]);
	f.fillColor = (event.value=="Option2") ? color.ltGray : color.white;
}

[GatsbyNZ]

Thanks for your quick reply!

A few Qs, if I have several options that fall into the 1st category, can I just add it after "Option1" with a ","?

People can still type in the grayed out fields, is there a way to disable the grayed-out areas at the same time?

Many Thanks.

[try67]

- Yes, but not like that. You would need to add another part to the if condition using the OR logical operator.

- Yes, by setting the field's readonly property to true (or to false, if the condition is not met).

[GatsbyNZ]

Sorry I am script illiterate, can you please show me how to do this.

f.fillColor = (event.value=="options1" or "option2") ? color.ltGray : color.white;
}

Can you also please give me a script for the second question?

Appreciate your help greatly.

[Asim123]

You specifically answered you don't want read-only

not read-only either. I just want the whole section to be grayed out. like putting a layer of 20% grey over it

When you got working solution for your question now you want what you said you don't want???

[GatsbyNZ]

Sorry, maybe I was not making it clear enough or I was using the wrong terminology, please don't judge

[try67 · Accepted solution]

You can use something like this:

f.fillColor = (event.value=="Option1" || event.value=="Option2") ? color.ltGray : color.white;
f.readonly = (event.value=="Option1" || event.value=="Option2");

[GatsbyNZ]

Thanks very much for your help:)