Saturday, 26 March 2016

How To Create A Show Hide Password Button using Jquery



In this tutorial we are going to learn how to create show hide password button using jquery. In most of the website's login or register page for reducing typo error while entering password, there is one more textbox for entering confirm password and re enter password. But this is old method. Now There is other alternative for reducing typo error while entering password we can show password after entering password. If we show password then we can reduce typo error. For showing password, I have used jquery. With the help of jquery we can show entering password and hide entering password on button click event. For show and hide entering password I have used jquery attr() method. This is very useful functionality for any website register or login page.


Source Code

login.php


 <html>  
      <head>  
           <meta name="viewport" content="initial-scale=1.0, user-scalable=no">  
           <meta charset="utf-8">  
           <title>Webslesson Tutorial</title>  
           <script src="jquery.js"></script>  
           <script src="js/bootstrap.js"></script>  
           <link href="css/bootstrap.css" rel="stylesheet" />  
      </head>  
      <body>  
           <div class="container" style="width:500px; border:1px solid #ccc;">  
                <br />  
                <h2 align="center">Login</h2>  
                     <form id="login_form">  
                          <label>Username</label>  
                          <input type="text" name="username" id="username" placeholder="Username" class="form-control" />  
                          <br />  
                          <label>Password</label>  
                          <input type="password" name="password" id="password" placeholder="Password" class="form-control" />  
                          <br />  
                          <button type="button" id="show_password" name="show_password" class="btn btn-default">Show</button>  
                     </form>  
                <br />                 
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      $('#show_password').on('click', function(){  
           var passwordField = $('#password');  
           var passwordFieldType = passwordField.attr('type');  
           if(passwordFieldType == 'password')  
           {  
                passwordField.attr('type', 'text');  
                $(this).text('Hide');  
           }  
           else  
           {  
                passwordField.attr('type', 'password');  
                $(this).text('Show');  
           }  
      });  
 });  
 </script>  

0 comments:

Post a Comment