CODEWITHSUNDEEP
jqueryhtml
BoeNoe
BoeNoe

Reputation: 562

jQuery Show Password

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>

Upvotes: 7

Views: 32905

Answers (6)

Jonathan Arias
Jonathan Arias

Reputation: 590

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.

Upvotes: 9

Tayyeb
Tayyeb

Reputation: 147

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

Upvotes: 0

patwoj98
patwoj98

Reputation: 447

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/

Upvotes: 5

jacobdo
jacobdo

Reputation: 1615

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>

Upvotes: 13

jean-max
jean-max

Reputation: 1654

Do this :

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

Upvotes: 11

depperm
depperm

Reputation: 10746

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' />

Upvotes: 2

Related Questions