Show and Hide Password in Two Inputs

Question

Please tell me how to hide the password confirmation field. I can hide the password field, but the second field does not work, does not respond

Here is my code with input

<div class="mb-3">
              <label class="form-label">New password</label>
              <div class="input-group input-group-flat">
              <input type="password" name="password" id="password" class="form-control">
              <span class="input-group-text">

                <span toggle="#password" class="ti ti-eye toggle-password"></span>

              </span>
            </div>
      </div>
            <div class="mb-3">
              <label class="form-label">Confirm password</label>
              <div class="input-group input-group-flat">

              <input type="password" name="confirm_password" id="confirm_password" class="form-control">
              <span class="input-group-text">
                  <span toggle="#password" class="ti ti-eye toggle-password2"></span>

            </div>
            </div>

my js

$(".toggle-password").click(function() {
  $(this).toggleClass("ti-eye-off");
  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("ti-eye-off");
  var input = $($(this).attr("toggle"));
  if (input.attr("type") == "password") {
    input.attr("type", "text");
  } else {
    input.attr("type", "password");
  }
});

I tried changing the variables by duplicating the code, but it still doesn't work. Changing the icon eye on the field remains hidden

Answer 1

You are trying to change attr to input, but this variable is the span. So you need to find input by id and it works.

This will be

$(".toggle-password").click(function() {
  $(this).toggleClass("ti-eye-off");
  // var input = $($(this).attr("toggle"));  WRONG
  var input = $("#password");
  if (input.attr("type") == "password") {
    input.attr("type", "text");
  } else {
    input.attr("type", "password");
  }
});

In addition, if you want to hide/show two inputs, find by classname instead of id.

I made you a basic snippet to see it in live.

 $(".toggle__password").click(function() { $(this).toggleClass("password--hidden"); const input = $(".password"); if (input.attr("type") === "password") { input.attr("type","text"); } else { input.attr("type", "password"); } });

 .toggle__password { background:red }.password--hidden { background:green }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <input type="password" value="hello" class="password"/> <input type="password" value="bye" class="password" /> <span class="toggle__password password--hidden"> Hidden </span> </div>