JavaScript: show password on hold

Question

I have 2 inputs for passwords. Each input field has 'show' button, which shows password on holding that button.

<form name="resetting_form" method="post" action="">

    <div class="form-group has-feedback">

        <input type="password" id="password_first" required="required" placeholder="New Password" class="form-control">

        <span class="show">show</span>

    </div>

    <div class="form-group has-feedback">

        <input type="password" id="password_second" required="required" placeholder="Repeat Password" class="form-control">

        <span class="show">show</span>

    </div>  

    <input type="submit" class="btn btn-primary" value="Submit">

</form>

Here is what I have

$(".form-control").on("keyup",function(){

    if ($(this).val())

        $(".show").show();

    else

        $(".show").hide();

});



$(".show").mousedown(function(){

    $(".form-control").attr('type','text');

}).mouseup(function(){

    $(".form-control").attr('type','password');

}).mouseout(function(){

    $(".form-control").attr('type','password');

});

Problem

When I click to 'show' button, both input fields are shown. How to make sure that only corresponding password is shown?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

When you use $(".form-control"), jquery select all .form-control element. But you need to select target element using this variable in event function and use .prev() to select previous element.

$(".show").mousedown(function(){
    $(this).prev().attr('type','text');
}).mouseup(function(){
    $(this).prev().attr('type','password');
}).mouseout(function(){
    $(this).prev().attr('type','password');
});

JavaScript: show password on hold

Sign up