jQuery to show hide password characters in asp.net textbox on checkbox check uncheck

Introduction: In this article I am going to explain how to show and hide the text entered in asp.net password textbox (textbox with TextMode=Password) on checkbox selection using jQuery without any plugin. 
jQuery to show hide password characters in asp.net textbox on checkbox check uncheck

Description:  Here I have demonstrated the feature to show the password typed in the textbox so that user can verify the password entered while making login or getting registered on any website.

Implementation: Let’s create a sample page from demonstration purpose.

HTML Source Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        function ShowHidePassword() {
            var txt = $('#<%=txtPassword.ClientID%>');
            if (txt.prop("type") == "password") {
                txt.prop("type", "text");
                $("label[for='cbShowHidePassword']").text("Hide Password");
            }
            else {
                txt.prop("type", "password");
                $("label[for='cbShowHidePassword']").text("Show Password");
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <fieldset style="height: 100px; width: 280px;">
                <legend>Show/Hide Password text in textbox</legend>
                <table>
                    <tr>
                        <td>User Name</td>
                        <td>
                            <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox></td>
                    </tr>
                    <tr>
                        <td>Password</td>
                        <td>
                            <asp:TextBox ID="txtPassword" autocomplete="off" TextMode="Password" runat="server"></asp:TextBox>

                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <asp:Button ID="btnLogin" runat="server" Text="Login" />
                            <input id="cbShowHidePassword" type="checkbox" onclick="ShowHidePassword();" />
                            <label class="form-control" for='cbShowHidePassword'>Show Password</label>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>
    </form>
</body>
</html>

Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.
Previous
Next Post »

4 comments

Click here for comments
Unknown
admin
October 07, 2015 ×

very nice...thanks..

Reply
avatar
October 17, 2015 ×

Thanks kishor for your feedback. Stay connected and keep reading for more useful updates on bootstrap and other.

Reply
avatar
Sandhya
admin
June 12, 2019 ×

Awesome this really works...Thank you!!!

Reply
avatar
Anonymous
admin
June 12, 2019 ×

Awesome this worked..Thank you!!!

Reply
avatar

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..