CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Umang
Umang

Reputation: 242

Why is show/ hide password only working on one input field

I have two input fields. One for Password and another for confirm password. I want to have show/ hide password functionality for both the input fields.

I have written the code for same but it only works for password input field.

<div class="input-field col s12 clear password-button">
    <input name="old_password" ng-model="form.password" id="old_password" type="password" class="validate">
    <a id="showPassword"><i class="material-icons">visibility</i></a>
</div>

<div class="input-field col s12 clear password-button">
    <input name="new_password1" ng-model="form.password1" id="new_password" type="password" class="validate">
    <a id="showPassword"><i class="material-icons">visibility</i></a>
</div>


<script type="text/javascript">
$(document).ready(function() {
$("#showPassword").click(function(){
    var foo = $(this).prev().attr("type");
    if(foo == "password"){
        $(this).prev().attr("type", "text");
    } else {
        $(this).prev().attr("type", "password");
        }
    });
});
</script>

Style.css

#showPassword{
    position:absolute;
    right: 0px;
    top: 12px;
    color: #000;
}

How do I make the confirm password field to have show/ hide feature?

Upvotes: 0

Views: 338

Answers (3)

Shivani Sonagara
Shivani Sonagara

Reputation: 1307

Hope you want the same.

$(document).ready(function() {
$(".showPassword").click(function(){
    var foo = $(this).prev().attr("type");
    if(foo == "password"){
        $(this).prev().attr("type", "text");
    } else {
        $(this).prev().attr("type", "password");
        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-field col s12 clear password-button">
    <input name="old_password" ng-model="form.password" id="old_password" type="password" class="validate">
    <a class="showPassword"><i class="material-icons">visibility</i></a>
</div>

<div class="input-field col s12 clear password-button">
    <input name="new_password1" ng-model="form.password1" id="new_password" type="password" class="validate">
    <a class="showPassword"><i class="material-icons">visibility</i></a>
</div>

Upvotes: 2

Clarity
Clarity

Reputation: 10873

You have two items with the same id so the event is fired only on the first one. Better use class instead:

<div class="input-field col s12 clear password-button">
    <input name="old_password" ng-model="form.password" id="old_password" type="password" class="validate">
    <a id="password" class="showPassword"><i class="material-icons">visibility</i></a>
</div>

<div class="input-field col s12 clear password-button">
    <input name="new_password1" ng-model="form.password1" id="new_password" type="password" class="validate">
    <a id="password_confirm" class="showPassword"><i class="material-icons">visibility</i></a>
</div>


<script type="text/javascript">
$(document).ready(function() {
  $(".showPassword").click(function() {
    var foo = $(this).prev().attr("type");
    if (foo == "password") {
      $(this).prev().attr("type", "text");
    } else {
      $(this).prev().attr("type", "password");
    }
  });
});
</script>

Upvotes: 5

Darksymphony
Darksymphony

Reputation: 2683

it can't work with 2 identical ID's. You have showPassword ID twice. Rename the 2nd one and create the same script for this ID. Or simply use class instead.

Upvotes: 1

Related Questions