blahblah blahblah - 1 month ago 12
HTML Question

JavaScript: show password on hold

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?

Answer

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');
});
Comments