Show/hide multiple fields on drop-down choice using if else

[BradSmithSC]

Goal is to show or hide three fields depending on a drop-down choice. Show if X, hide if Y.

Getting a syntax error on line 6 when adding to the mouse-up trigger of the dropdown field.

Are multiple actions allowed for each if condition?

if(event.target.value = "Yes")
  getField("Top_inches").display = display.visible;
  getField("Top_numerator").display = display.visible;
  getField("Top_denominator").display = display.visible;
else
  getField("Top_inches").display = display.hidden;
  getField("Top_numerator").display = display.hidden;
  getField("Top_denominator").display = display.hidden;

[try67 · Accepted solution]

You have at least two syntax errors. The first is that you used the wrong operator for the comparison. It's "==", not "=" (that is the value assignment operator).

The second is that you didn't put the code blocks inside curly brackets.

So your code should be:

if (event.target.value == "Yes") {
    this.getField("Top_inches").display = display.visible; 
    this.getField("Top_numerator").display = display.visible; 
    this.getField("Top_denominator").display = display.visible; 
} else {
    this.getField("Top_inches").display = display.hidden; 
    this.getField("Top_numerator").display = display.hidden; 
    this.getField("Top_denominator").display = display.hidden; 
}

[try67]

PS. If you're getting an error message please post it in full. It is very helpful in finding and fixing problems with the code.

[BradSmithSC]

Thanks for the quick response Try67.

Got this script on the mouse-up trigger. However, the fields do not immediately show/hide when a choice is selected in the drop-down field. Instead, the user selects the drop-down choice, clicks off the drop-down field, only when re-selecting the drop-down field do the other fields show/hide. The animation below illustrates this behavior.

Since this drop-down is just a yes/no choice, it seems using a single checkbox may return better user experience as shown in this animation. However, if more than a yes/no choice was needed what would be a best practice for a drop-down field?

The three fields are collecting a measurement. A hyphen and slash help clarify the desired data. Can text & image visibility be modified with JavaScript?

The error msg was just 'syntax error' in the JavaScript Editor window footer with a line reference. Appreciate you mentioning full error details should be posted whenever available.

[try67]

If you want the code to run as soon as a selection is made I recommend moving it to the field's custom validation script.

You will need to adjust the first line to:

if (event.value == "Yes") { 

Also, you should make sure that the "Commit selected value immediately" option is ticked, under the field's Properties - Options tab.

Why not simply include the hyphen and the slash, and the rest of the text, into a single field? Seems to me it will make your code much more simple.

[BradSmithSC]

We're trying to get our field reps to populate forms electronically. One reason focusing so intently on creating a smooth user experience. Partially explains my irreverently high nit-pick level

Noticing odd form behavior. The drop-down must first get the focus then the choices are available. Seems like user must select the field twice. Feels a tad clumsy.

Why not simply include the hyphen and the slash, and the rest of the text, into a single field? Seems to me it will make your code much more simple.

Yeah, a single field would sure be simpler. In this case, these three fields are converted into a decimal. The calculated size ensures the correct PartID is entered which corresponds to material quantity needs.

In this animation, at the bottom is a description builder which stitches together certain fields. This gets copied into a work order notes field.