Question 36203 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Simplify javascript password show/hide function – Jquery

I have 3 different password input as:

   --Current Password Input
   <input asp-for="ChangePassword.OldPassword" class="form-control" id="currentPassword"   required autofocus />
   <button class="btn btn-light shadow-none ms-0" type="button" id="toggleCurrentPassword" tabindex="99"><i class="mdi mdi-eye-outline"></i></button>

   --New password input
   <input asp-for="ChangePassword.NewPassword" class="form-control" id="newPassword" required autofocus />
   <button class="btn btn-light shadow-none ms-0" type="button" id="toggleNewPassword" tabindex="99"><i class="mdi mdi-eye-outline"></i></button>
    
   --Confirm password input
   <input asp-for="ChangePassword.ConfirmPassword" id="confirmPassword" class="form-control" required autofocus />
   <button class="btn btn-light shadow-none ms-0" type="button" id="toggleConfirmPassword" tabindex="99"><i class="mdi mdi-eye-outline"></i></button>

As you can see each one have a button, when user click I remove the type password, and if the user click again I add it again.

My script to do that:

    $('#toggleCurrentPassword').click(function() {
      if ($('#currentPassword').attr('type') === "password") {
        $('#currentPassword').attr('type', 'text');
      } else {
        $('#currentPassword').attr('type', 'password');
      }
    })

  $('#toggleNewPassword').click(function() {
    if ($('#newPassword').attr('type') === "password") {
      $('#newPassword').attr('type', 'text');
    } else {
      $('#newPassword').attr('type', 'password');
    }
  })

  $('#toggleConfirmPassword').click(function() {
      if ($('#confirmPassword').attr('type') === "password") {
        $('#confirmPassword').attr('type', 'text');
      } else {
        $('#confirmPassword').attr('type', 'password');
      }
    })

It is working, but I think it should be a better way to do this, there is a lot of repeated code in function. How can I do a better work here? Regards

Tags:

2

Answers


  1. 0

    You could create a function to handle each eventListener:

    function passwordToggle(button, input) {
  $(button).click(function() {
    if ($(input).attr('type') === "password") {
      $(input).attr('type', 'text');
    } else {
      $(input).attr('type', 'password');
    }
  })
}

passwordToggle('#toggleCurrentPassword', '#currentPassword');
passwordToggle('#toggleNewPassword', '#newPassword');
passwordToggle('#toggleConfirmPassword', '#confirmPassword');
    Login or Signup to reply.
  2. 0

    In my opinion, you could simply create a function to be reusable, I think.

    Example:

     --Current Password Input
 <br>
   <input asp-for="ChangePassword.OldPassword" class="form-control" id="currentPassword"   required autofocus />
   <button class="btn btn-light shadow-none ms-0 btn-password-toggle" type="button" id="toggleCurrentPassword" data-input-id="#currentPassword" tabindex="99">Password Toggle<i class="mdi mdi-eye-outline"></i></button>
<br>
   --New password input
<br>
   <input asp-for="ChangePassword.NewPassword" class="form-control" id="newPassword" required autofocus />
   <button class="btn btn-light shadow-none ms-0 btn-password-toggle" type="button" id="toggleNewPassword" data-input-id="#newPassword" tabindex="99">Password Toggle<i class="mdi mdi-eye-outline"></i></button>
    <br>
   --Confirm password input
   <br>
   <input asp-for="ChangePassword.ConfirmPassword" id="confirmPassword" class="form-control" required autofocus />
   <button class="btn btn-light shadow-none ms-0 btn-password-toggle" type="button" id="toggleConfirmPassword" data-input-id="#confirmPassword" tabindex="99">Password Toggle<i class="mdi mdi-eye-outline"></i></button>
   
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script>
  $(".btn-password-toggle").on("click", function() {  
    let inputId = $(this).attr("data-input-id");
    let curType = $(inputId).attr("type") === "password" ? "text" : "password";
    $(inputId).attr("type", curType);
  })
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search