Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Hiding Fields on Forms

Avatar

Former Community Member

Hi, I have created a form which has drop downs, text boxes hidden and then depending on what the user selects from the 1st drop down will then display further drop downs, text boxes etc, how can I write the script so when a user tab or presses enter then then next drop down or text box appears.

Many thanks

1 Accepted Solution

Avatar

Correct answer by
Level 5

Hi,

You would want to put your script on the Exit event of the drop down list which controls the show hide ( or multiple drop down lists if you are wanting multiple show hide)

and the code would be something like

(assuming drop downs are named dropdown1, dropdown2 and dropdown3 and dropdown 2 and 3 are hidden to start)

// Exit event of dropdown1

// hide all drop downs shown by this drop down to allow for user changing their mind.

dropdown2.presence = "hidden";

dropdown3.presence = "hidden";

if ( dropdown1.rawValue == "value to show dropdown2)

{

     dropdown2.presence = "visible";

}

else if (dropdown1.rawValue == "value to show dropdown3")

{

     dropdown3.presence = "visible";

}

// End of code

If you have multiple possible options you could look at using a switch statement instead

// possible switch statement ( this would replace the if -> else if block above)

// you can add as many case statements as you like.

switch ( dropdown1.rawValue)

{

     case "value to show dropdown2":

          dropdown2.presence = "visible";

          break;

     case "value to show dropdown3":

          dropdown3.presence = "visible";

          break

}

// end of switch

Hoe this helps

Malcolm

Message was edited by: BarlaeDC - correcting spelling

View solution in original post

4 Replies

Avatar

Correct answer by
Level 5

Hi,

You would want to put your script on the Exit event of the drop down list which controls the show hide ( or multiple drop down lists if you are wanting multiple show hide)

and the code would be something like

(assuming drop downs are named dropdown1, dropdown2 and dropdown3 and dropdown 2 and 3 are hidden to start)

// Exit event of dropdown1

// hide all drop downs shown by this drop down to allow for user changing their mind.

dropdown2.presence = "hidden";

dropdown3.presence = "hidden";

if ( dropdown1.rawValue == "value to show dropdown2)

{

     dropdown2.presence = "visible";

}

else if (dropdown1.rawValue == "value to show dropdown3")

{

     dropdown3.presence = "visible";

}

// End of code

If you have multiple possible options you could look at using a switch statement instead

// possible switch statement ( this would replace the if -> else if block above)

// you can add as many case statements as you like.

switch ( dropdown1.rawValue)

{

     case "value to show dropdown2":

          dropdown2.presence = "visible";

          break;

     case "value to show dropdown3":

          dropdown3.presence = "visible";

          break

}

// end of switch

Hoe this helps

Malcolm

Message was edited by: BarlaeDC - correcting spelling

Avatar

Former Community Member

Hi,

That works fine for drop downs but if I have a numeric box where a user can enter any value how would the exit statement then be written?

Thanks

Avatar

Level 5

Hi,

I wouldn't recommend running show hide on a entered field as it is more difficult to control, but the code wouldn't have to change except for the names of the fields.

If you are wanting it for specific values ( 10, 15, 100.00) then you would replace them in the if/switch statement. If you are wanting ranges then you would have to use the if statement and have it something like

if (( numericField.rawValue >= 100) && ( numericField.rawValue < 200))

{

     // show hide code here

}

else if (( numericField.rawValue >=200 ) && ( numericField.rawValue < 300))

{

    // show hide code here

}    

else if ( numericField.rawValue >= 300)

{

     // shoe hide code here

}

else

{

     // this would cover any value that is not in the above ranges

     // show hide code here

}

Hope this helps

Malcolm

Avatar

Former Community Member

Ok many thanks, that confirmed my own thoughts in to leave numeric boxes as they are as cannot pre determine

the values that the users would enter.

Many thanks for your assistance