function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Herish SurendranHerish Surendran 

How to toogle between password visibility in visualforce

<apex:page controller="SignUpPage">
<apex:form >
    <apex:pageBlock title="Profile Details">
    *Required Field
 <apex:pageBlockSection >
    <apex:inputText value="{!sup.User_Name__c}" label="User Name *"/>
    <br></br>
    <apex:inputsecret value="{!sup.Type_Password__c}" label="Type Password *"/>
    <br></br>
    <apex:inputsecret value="{!sup.Retype_Password__c}" label="Retype Password *"/>
    <br></br>
    <apex:commandButton value="Create Profile" action="{!CreateProfile}"/><br></br>    
   </apex:pageBlockSection>
 </apex:pageBlock>
</apex:form>
</apex:page>
Best Answer chosen by Herish Surendran
Deepali KulshresthaDeepali Kulshrestha
Hi Herish,

You are just one step away,All you have to do is just create a checkbox and add the
onclick event (that will toggle the inputsecret field).

1.First Create a checkbox corresponding to inputSecretField:

 (i.e) <apex:inputCheckbox id="checkbx" onclick="toggle();" />

2.Create a javascript method inside vf page:
  
(i.e)
<script>
    function toggle(){
        var showPasswordCheckBox = document.getElementById('{!$Component.frm.theblock.thesection.checkbx}');
        if(showPasswordCheckBox.checked){
            document.getElementById('{!$Component.frm.theblock.thesection.Upass}').type="TEXT";
        }else{
            document.getElementById('{!$Component.frm.theblock.thesection.Upass}').type="PASSWORD";
        }
    }
    
    </script>



Note:--{ Upass is my password field Id and checkbx is my checkbox id }

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
www.kdeepali.com

All Answers

Herish SurendranHerish Surendran
I would like to add the button to toogle between password visibility. What change should be made in the above code
Deepali KulshresthaDeepali Kulshrestha
Hi Herish,

You are just one step away,All you have to do is just create a checkbox and add the
onclick event (that will toggle the inputsecret field).

1.First Create a checkbox corresponding to inputSecretField:

 (i.e) <apex:inputCheckbox id="checkbx" onclick="toggle();" />

2.Create a javascript method inside vf page:
  
(i.e)
<script>
    function toggle(){
        var showPasswordCheckBox = document.getElementById('{!$Component.frm.theblock.thesection.checkbx}');
        if(showPasswordCheckBox.checked){
            document.getElementById('{!$Component.frm.theblock.thesection.Upass}').type="TEXT";
        }else{
            document.getElementById('{!$Component.frm.theblock.thesection.Upass}').type="PASSWORD";
        }
    }
    
    </script>



Note:--{ Upass is my password field Id and checkbx is my checkbox id }

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
www.kdeepali.com
This was selected as the best answer
Herish SurendranHerish Surendran
<apex:page controller="SignUpPage">

<script>
    function toggle(){
        var showPasswordCheckBox = document.getElementById('{!$Component.frm.theblock.thesection.checkbx}');
        if(showPasswordCheckBox.checked){
            document.getElementById('{!$Component.frm.theblock.thesection.Upass}').type="TEXT";
        }else{
            document.getElementById('{!$Component.frm.theblock.thesection.Upass}').type="PASSWORD";
        }
    }
    
    </script>

<apex:form >
 <apex:pageBlock title="Profile Details" id="theblock">
 *Required Field
   <apex:pageBlockSection  id="thesection">
    <apex:inputText value="{!sup.User_Name__c}" label="User Name *" />
    <br></br>
    <apex:inputsecret id="Upass" value="{!sup.Type_Password__c}"  label="Type Password *"/>
    <br></br>
    <apex:inputCheckbox id="checkbx" onclick="toggle();" />
    <br></br>
    <apex:inputsecret value="{!sup.Retype_Password__c}" label="Retype Password *"/>
    <br></br>
    <apex:commandButton value="Create Profile" action="{!CreateProfile}"/><br></br>    
   </apex:pageBlockSection>
 </apex:pageBlock>
</apex:form>
</apex:page>




I did this but it didn't work
Herish SurendranHerish Surendran
@Deepali Kushrestha could you please let me know where I went wrong
Herish SurendranHerish Surendran
I have set id value in form tag and it is working now. Thanks Deepali