Search

Friday, January 1, 2016
0 comments

JQuery: CheckBox show/Hide password when changed

11:30 PMFriday, January 1, 2016
In this article, I will show you, How to show password when we select "Show PassWord" checkbox. If check box is selected then show password otherwise hide. Also I will show you, when we enter some text into the password box then entered text write on the span tag. If you want to learn that how I design it, Follow the following steps:
Step-1 :  Add two TextBox in the body section, also add one span tag and one button control.
Step-2 :  Run Jquery function, get the Id property of  password textbox, apply keyup  function on password textbox. It means when you enter some text into password box then enter text printed together with the cursor. 
Step-3 : Check whether CheckBox is checked or not. If check then write text on span tag.


Complete Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
        $(function () {
            $('#passtxt').keyup(function () {
                var ischecked = $('#chktxt').prop('checked');
                if (ischecked) {
                    $('#spantxt').html($(this).val());
                    $('#spantxt').show();

                }
                else
                {
                    $('#spantxt').hide();
                }
            })
            $('#chktxt').change(function () {
                var ischecked = $(this).prop('checked');
                if (ischecked) {
                    $('#spantxt').show();

                }
                else
                {
                    $('#spantxt').hide();
                }
            })
        });




    </script>
    </head>
<body>
<form id="form1">
    UserName:<input type="text" id="usertxt"/><br/>
    Password:<input type="password" id="passtxt"/><br/>
    <span id="spantxt" style="display:none"></span>
    <br/>
    <input type="checkbox" id="chktxt"/>Show Password
    <input type="button" value="login"/>

</form>
</body>
</html>

Protected by Copyscape Online Copyright Protection Software

0 comments :

Post a Comment

 
Toggle Footer
Top