Show or Hide Password using jQuery

In this post i want to explain how to Show or Hide Password using jQuery.In this example i have used show() and hide() methods.This method is very useful to check wheather entered password correct or not.

Live DemoDownload Script

Before that we need to include jQuery Library file.Copy and Paste the following URL.
Library File:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>

jQuery Function

 <script type="text/javascript">
    $(function () {
        $('#show').hide();
      
            $('#btn').click(function () {
                var txt = $('#btn').val()
                var pwd = $('#hide').val();
                if (pwd.length > 0) {
                    if (txt == 'Show Password') {
                        $(this).val('Hide Password');
                        $('#show').val($('#hide').val());
                        $('#show').show();
                        $('#hide').hide();
                        return false;
                    }
                else if (txt == 'Hide Password') {
                    $(this).val('Show Password');
                    $('#show').hide();
                    $('#hide').show();
                    return false;
                }
            }
            else {
                    alert('Plese Enter Password');
                    return false;
                }
        });
    })
</script>

HTML File

<form>
          <div> <b>Enter Password: </b>
            <input type="password" id="hide" />
            <input type="text" id="show" />
            <input type="button" id="btn" value="Show Password" />
          </div>
     </form>

Please share your comments and feedback.Thanks.Please subscribe my updates via email.