Toggle field type attribute

Question

I don't know what I am doing wrong here. Scratching my head wondering why my function isn't working. Pretty much trying to toggle "Show/Hide Password".

Currently, I am able to switch from password to text, but not able to switch back to password. Anything you see wrong?

HTML:

<div class="form-group mbs">
  <label for="password" class="label-medium mbxs">Password</label><br>
  <input type="password" name="password" class="form-control input-medium" required>
</div>

<div class="form-group mbs">
  <label for="passwordConfirm" class="label-medium mbxs">Password Confirm</label><br>
  <input type="password" name="passwordConfirm" class="form-control input-medium mbs" required><br>
  <a href="" id="generate-password" class="btn btn-large btn-green-gradient">Generate Password</a>
  <a href="" id="show-password" class="btn btn-large btn-red-gradient">Show/Hide Password</a>
</div>

Scripts:

$("#show-password").click(function(e){
e.preventDefault();
if($("input[name='password']").attr('type', 'password') && $("input[name='passwordConfirm']").attr('type', 'password')){
  $("input[name='password']").attr('type', 'text');
  $("input[name='passwordConfirm']").attr('type', 'text');
}else{
  $("input[name='password']").attr('type', 'password');
  $("input[name='passwordConfirm']").attr('type', 'password');
}

});

@RoryMcCrossan, I doubt you can't.. https://jsfiddle.net/rayon_1990/53Lks4s5/ — Rayon, Apr 13 '16 at 12:54
You're correct. It seems that particular security block has been lifted. — Rory McCrossan, Apr 13 '16 at 12:59

score 3 · Accepted Answer · answered Apr 13 '16 at 12:56

You are assigning the attribute at if condition. Change it like this,

$("#show-password").click(function(e) {
  e.preventDefault();
  if ($("input[name='password']").attr('type') == 'password' && $("input[name='passwordConfirm']").attr('type') == 'password') {

    $("input[name='password']").attr('type', 'text');
    $("input[name='passwordConfirm']").attr('type', 'text');
  } else {

    $("input[name='password']").attr('type', 'password');
    $("input[name='passwordConfirm']").attr('type', 'password');
  }
});

Fiddle

if($("input[name='password']").attr('type', 'password') && $("input[name='passwordConfirm']").attr('type', 'password')) will always return true.

Sweet! Exactly what I was looking for! – Taylor Foster Apr 13 '16 at 13:21 — Taylor Foster, Apr 13 '16 at 13:21
@TaylorFoster so you can accept it as answer right? – Anoop Joshi Apr 13 '16 at 13:27 — Anoop Joshi, Apr 13 '16 at 13:27

score 1 · Answer 2 · edited May 23 '17 at 11:45

The way you are using .attr will set the attribute instead of comparing it's type

$("#show-password").click(function(e){
    e.preventDefault();
    if($("input[name='password']").attr('type')=='password' && // Changed here
    $("input[name='passwordConfirm']").attr('type')== 'password')
    {
      $("input[name='password']").attr('type', 'text');
      $("input[name='passwordConfirm']").attr('type', 'text');
    }else{

  $("input[name='password']").attr('type', 'password');
  $("input[name='passwordConfirm']").attr('type', 'password');
}
});

Working jsfiddle

EDIT As pointed out by Anoop Joshi there is no difference between his & my answer. So modified a little , by using a common class between the two input type = "password" & used ternary operator to evaluate it

HTML

<div class="form-group mbs">
  <label for="password" class="label-medium mbxs">Password</label><br>
   // Used a common class passwordToggle 
  <input type="password" name="password" class="passwordToggle form-control input-medium" required>
</div>

<div class="form-group mbs">
  <label for="passwordConfirm" class="label-medium mbxs ">Password Confirm</label><br>
  // Used a common class passwordToggle 
  <input type="password" name="passwordConfirm" class="form-control input-medium mbs passwordToggle" required><br>
  <a href="" id="generate-password" class="btn btn-large btn-green-gradient">Generate Password</a>
  <a href="" id="show-password" class="btn btn-large btn-red-gradient">Show/Hide Password</a>
</div>

JS

$("#show-password").click(function(e){
e.preventDefault();
// Minimizing lines of code using ternary operator
$(".passwordToggle").attr('type') == 'password'? $(".passwordToggle").attr('type','text'):$(".passwordToggle").attr('type','password')
});

jsfiddle using ternary operator

@Anoop Joshi I didnt saw that you have answered it , probably you finished it when I was writing in jsfiddle. — brk, Apr 13 '16 at 13:08

Gurjit Singh · Answer 3 · 2016-04-13T13:18:06.740

you need to use .attr('type')=='password'. instead of .attr('type', 'password') in condition.Try below code

$("#show-password").click(function(e){ e.preventDefault(); if($("input[name='password']").attr('type')=='password' && $("input[name='passwordConfirm']").attr('type')=='password'){ $("input[name='password']").attr('type', 'text'); $("input[name='passwordConfirm']").attr('type', 'text'); }else{ $("input[name='password']").attr('type', 'password'); $("input[name='passwordConfirm']").attr('type', 'password'); } });

Toggle field type attribute

3 Answers3