<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 ----------> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-md-4"> <!-- general form elements --> <div class="box box-primary"> <div class="box-header with-border"> <h3 class="box-title">Update password</h3> </div> <form id="program_form" action="http://14.139.184.228/mis/login/update_password" method="post"> <div class="box-body"> <!-- text input --> <div class="form-group"> <!--<label>Department Name</label>--> <div class="input-group"> <input id="password-field1" autocomplete="off" type="password" class="form-control" placeholder="Enter Current Password" name="old_password" required=""> <span class="input-group-addon "> <span toggle="#password-field1" class="fa fa-fw fa-eye toggle-password1"></span> </span> </div> </div> <div class="form-group"> <div class="input-group"> <input id="password-field2" autocomplete="off" type="password" class="form-control" placeholder="Enter New Password" name="password" required=""> <span class="input-group-addon"> <span toggle="#password-field2" class="fa fa-fw fa-eye toggle-password1"></span> </span> </div> </div> <div class="form-group"> <div class="input-group"> <input id="password-field3" type="password" autocomplete="off" class="form-control" placeholder="Confirm New Password" name="password_confirmation" required=""> <span class="input-group-addon"> <span toggle="#password-field3" class="fa fa-fw fa-eye toggle-password3"></span> </span> </div> </div> </div> <div class="box-footer"> <button type="submit" class="btn btn-primary btn-block btn-flat">Update Password</button> </div> </form></div> </div> </div>

.field-icon { float: right; margin-left: -22px; margin-top: -25px; position: relative; z-index: 2; }

$(".toggle-password1").click(function () { $(this).toggleClass("fa-eye fa-eye-slash"); var input = $($(this).attr("toggle")); if (input.attr("type") == "password") { input.attr("type", "text"); } else { input.attr("type", "password"); } }); $(".toggle-password2").click(function () { $(this).toggleClass("fa-eye fa-eye-slash"); var input = $($(this).attr("toggle")); if (input.attr("type") == "password") { input.attr("type", "text"); } else { input.attr("type", "password"); } }); $(".toggle-password3").click(function () { $(this).toggleClass("fa-eye fa-eye-slash"); var input = $($(this).attr("toggle")); if (input.attr("type") == "password") { input.attr("type", "text"); } else { input.attr("type", "password"); } });