jQuery Show Password

Question

I am trying to make where if the user clicks on the checkbox, it shows the password in the inputbox as text. And if he/she unchecks, it sets the attribute to password. Any pointers?

Code:

 <!DOCTYPE html>
<html>
<head>
    <script type='text/javascript' src='jquery-3.1.1.min.js'></script>
    <script type='text/javascript' src='jquery-ui/jquery-ui.js'></script>

    <script type='text/javascript'>
        $(document).ready(function(){
            $('#check').click(function(){
                if($('test-input').attr('type', 'text'));
            });
        });
    </script>
</head>

<body>
    <input type='password' id='test-input' /> Show password <input type='checkbox' id='check' />
</body>
</html>

Possible duplicate of [change type of input field with jQuery](http://stackoverflow.com/questions/1544317/change-type-of-input-field-with-jquery) — Alex, Sep 27 '16 at 13:57

score 12 · Accepted Answer · answered Sep 27 '16 at 14:01

You are missing a # before test-input in the selector and you need to check the state of the checkbox each time you click on it

<script type='text/javascript'>
        $(document).ready(function(){
            $('#check').click(function(){
             alert($(this).is(':checked'));
                $(this).is(':checked') ? $('#test-input').attr('type', 'text') : $('#test-input').attr('type', 'password');
            });
        });
    </script>

I'll add you as best answer in a few mins – BoeNoe Sep 27 '16 at 14:02 — BoeNoe, Sep 27 '16 at 14:02

jean-max · Answer 2 · 2016-09-27T14:00:10.930

10

Do this :

$('#check').click(function(){
    if('password' == $('#test-input').attr('type')){
         $('#test-input').prop('type', 'text');
    }else{
         $('#test-input').prop('type', 'password');
    }
});

edited Sep 27 '16 at 14:00

answered Sep 27 '16 at 13:57

jean-max

1,640
1
18
33

Jonathan Arias · Answer 3 · 2021-02-23T03:55:25.253

I've made this little snippet:

$('.toggle-password').click(function(){
    $(this).children().toggleClass('mdi-eye-outline mdi-eye-off-outline');
    let input = $(this).prev();
    input.attr('type', input.attr('type') === 'password' ? 'text' : 'password');
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.7.95/css/materialdesignicons.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


<div class="form-group col-6">
   <label>Password</label>
   <div class="input-group">
      <input type="password" class="form-control" name="password" autocomplete="new-password" minlength="6">
      <div class="input-group-append toggle-password">
           <span class="input-group-text mdi mdi-eye-outline"></span>
      </div>
   </div>
</div>

It works with jQuery, for styling I've used Bootstrap and the icons are from Material Icons.

1

Perfect Solution – Kh.Mubashar Irshad May 07 '22 at 10:07

score 5 · Answer 4 · answered Sep 27 '16 at 14:01

This work correct:

$('#check').click(function(){
 if(document.getElementById('check').checked) {
    $('#test-input').get(0).type = 'text';
  } else {
      $('#test-input').get(0).type = 'password';
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='password' id='test-input' /> Show password <input type='checkbox' id='check' />

JSFIDDLE: https://jsfiddle.net/0xuue3v6/

score 2 · Answer 5 · answered Sep 27 '16 at 13:59

2

Your condition has a missing # for an id. Also that will set the type instead of checking if the type is text or password.

$(document).ready(function() {
  $('#check').click(function() {
    if ($('#test-input').attr('type') == 'text') {
      $('#test-input').attr('type', 'password');
    } else {
      $('#test-input').attr('type', 'text');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type='password' id='test-input' />Show password
<input type='checkbox' id='check' />

answered Sep 27 '16 at 13:59

depperm

10,606
4
43
67

When you click the box it doesn't change the attribute from text to password. – BoeNoe Sep 27 '16 at 14:05
@BoeNoe yes it does, in the console you can see the actual attribute changing and the text in the input changes from dots to text and back – depperm Sep 27 '16 at 14:10
It doesnt change from password to text – BoeNoe Sep 27 '16 at 14:50
what OS and browser are you on? it might be an issue on your end – depperm Sep 27 '16 at 14:52
windows 7 and chrome. – BoeNoe Sep 27 '16 at 14:58

score 0 · Answer 6 · answered Oct 22 '19 at 09:41

0

$('.pwd-hs-btn').click(function () {
    var next = $(this).next();
    if ('password' == next.attr('type')) {
      next.prop('type', 'text');
    } else {
     next.prop('type', 'password');
    }
});

answered Oct 22 '19 at 09:41

Tayyeb

127
7

jQuery Show Password

6 Answers6