<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2><strong>Bootstrap input show password value By </strong> <a href="https://goo.gl/pR8ito" target="_blank">Nababur</a> <br/></h2><br/> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <!-- Start form --> <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" name="password" id="password" placeholder="Password"> </div> <div class="form-check"> <button class="btn btn-info" type="button" name="showpassword" id="showpassword" value="Show Password">Show password</button> <button type="submit" class="btn btn-primary">Submit</button> </div> </form> <!-- End form --> </div> </div> </div>

jQuery(document).ready(function(){ // Show password Button $("#showpassword").on('click', function(){ var pass = $("#password"); var fieldtype = pass.attr('type'); if (fieldtype == 'password') { pass.attr('type', 'text'); $(this).text("Hide Password"); }else{ pass.attr('type', 'password'); $(this).text("Show Password"); } }); });