Password Show Hide with simple option

[gbruklin]

To have show/hide option in the password field I have tried a few methods including having two fields and show hide based on state, but it has problems.

Here is the way to do it.

Layout Structure

1. Password field and show hide icon inside a group. You can choose password field type as “password” by default.
2. Name the group “Password Parent” (name can be anything, it’s just for recognizing)
3. Create a custom state for “Password Parent” as “Password Show” and type can be “Yes/No”. You can leave the default state as blank.
4. Create condition for show/hide icon (default eye icon), if “Group Password Parent’s Password Show is Yes” then change the icon to hide password (icon with cross line).
5. Add id for the password field “password”

When clicking on the show/hide icon do the following (default will be eye icon without cross line)

Set State

1. If the icon is show password, Set state for the “Password Parent” as “Password Show” - “Yes” and
2. If the icon is hide password, Set state for the “Password Parent” as “Password Show” - “No”

In workflow add this

1. Do when condition is true (don’t forget to choose “Every Time”), Only when “Group Password Parent’s Password Show is Yes”

Run Javascript
$(’#password’).get(0).type = ‘text’;

2. Do when condition is true (don’t forget to choose “Every Time”), Only when “Group Password Parent’s Password Show is No”

Run Javascript
$(’#password’).get(0).type = ‘password’;

[tiago]

Thanks for the help.
I used this javascript "document.getElementById(‘password’).setAttribute(‘type’, ‘text’); " instead to make all in the same workflow and “document.getElementById(‘password’).setAttribute(‘type’, ‘password’);” to back to original form;

[chrismchewols]

How do you incorporate the java script in workflow? A step-by-step direction would be very helpful

[humbertogoveia]

don`t work

[gbruklin]

Add Run javascript

Show hide icon - Conditions in layout

When clicking show icon - Set state - Yes for the parent

When parent state is Yes, run this

Run Javascript

When parent state is yes and show password icon is clicked, set state as No

When parent state is no, run

Run javascript on this condition

Javascript

Hope this could help you

[melissa7]

@gbruklin

$(’#password’).get(0).type = ‘text’;

Thanks for sharing this!

For anyone trying to implement this - it won’t work if you copy & paste the javascript directly from this post. You need to type it out in the Run Javascript box and make sure you are using the correct single quotes. (That’s how I got it to work, at least.)