Javascript - Show / Hide password function for multiple input fields

user_19017948 0
Viewed 174

I have a small function which show and hide passwords in the input fields. It works fine when applied to a single input field, but when I apply to multiple fields it behaves wrong.

For example: by clicking on the input field new password, the function is activated for all the other fields, instead it should be activated only for the desired field.

How can I correct this unwanted behavior? Sorry but I'm relatively new, I appreciate any response, thanks.

function showPassword() {
  var x = document.getElementById("password_current");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }

  var y = document.getElementById("password_1");
  if (y.type === "password") {
    y.type = "text";
  } else {
    y.type = "password";
  }


  var z = document.getElementById("password_2");
  if (z.type === "password") {
    z.type = "text";
  } else {
    z.type = "password";
  }
}
label.t2 {
    font-size: 14px!important;
  line-height: 1.5em!important;
  font-weight: 500!important;
    margin-bottom: 6px!important;
    display: block;
}

/*Toggle Password class*/
#togglePw { display: none; }
#togglePw + label:before { content: "\f06e"; }
#togglePw:checked + label:before { content: "\f070"; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

<p class="">
    <label class="t2" for="password_current">Current Password</label>
    <input type="password" class="field-settings" name="password" id="password_current" autocomplete="off"/>
    <input type="checkbox" id="togglePw" onclick="showPassword()"/>
    <label for="togglePw" class="fa"></label>
</p>

<p class="">
    <label class="t2" for="password_1">New Password</label>
    <input type="password" class="field-settings" name="password_1" id="password_1" autocomplete="off" />
    <input type="checkbox" id="togglePw" onclick="showPassword()"/>
    <label for="togglePw" class="fa"></label>
</p>

<p class="">
    <label class="t2" for="password_2">Repeat New Password</label>
    <input type="password" class="field-settings" name="password_2" id="password_2" autocomplete="off" />
    <input type="checkbox" id="togglePw" onclick="showPassword()"/>
    <label for="togglePw" class="fa"></label>
</p>

show-hide function input html javascript
1 Answers

Pass the target field to showPassword():

function showPassword(targetID) {
  var x = document.getElementById(targetID);

  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }

}
label.t2 {
    font-size: 14px!important;
  line-height: 1.5em!important;
  font-weight: 500!important;
    margin-bottom: 6px!important;
    display: block;
}

/*Toggle Password class*/
#togglePw { display: none; }
#togglePw + label:before { content: "\f06e"; }
#togglePw:checked + label:before { content: "\f070"; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

<p class="">
    <label class="t2" for="password_current">Current Password</label>
    <input type="password" class="field-settings" name="password" id="password_current" autocomplete="off"/>
    <input type="checkbox" id="togglePw_current" onclick="showPassword('password_current')"/>
    <label for="togglePw_current" class="fa"></label>
</p>

<p class="">
    <label class="t2" for="password_1">New Password</label>
    <input type="password" class="field-settings" name="password_1" id="password_1" autocomplete="off" />
    <input type="checkbox" id="togglePw_1" onclick="showPassword('password_1')"/>
    <label for="togglePw_1" class="fa"></label>
</p>

<p class="">
    <label class="t2" for="password_2">Repeat New Password</label>
    <input type="password" class="field-settings" name="password_2" id="password_2" autocomplete="off" />
    <input type="checkbox" id="togglePw_2" onclick="showPassword('password_2')"/>
    <label for="togglePw_2" class="fa"></label>
</p>

user_15990110
Related