CODEWITHSUNDEEP
javascriptphphtmlpassword-encryption
K.Jue
K.Jue

Reputation: 41

How to View and Hide Password for all rows of the table

Table from the databaseThe show password function only works on the first row of the entry and is not working on the next entries/rows. The items are displayed by php through the database using foreach. how will the show/hide password work for all entries? any ideas?? I have the code as follows:

Html:

<td data-title="Password"><input id="viewPass" type="password" value="<?php echo $item["password"]; ?>" readonly/></td>
<button type="button" id="viewPswd" class="btn btn-default"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></button>
<script src="js/showPass.js"></script>

Javascript:

 var myButton = document.getElementById('viewPswd'),
  myInput = document.getElementById('viewPass');
  myButton.onclick = function () {

      'use strict';

      if (this.id === 'viewPswd') {
          myInput.setAttribute('type', 'text');
          this.textContent = 'Hide';

      } else {

           myInput.setAttribute('type', 'password');

           this.id = 'viewPswd';
      }
  };

Upvotes: 1

Views: 6298

Answers (2)

Aravindh Gopi
Aravindh Gopi

Reputation: 2166

If you want to work with multiple buttons and textboxes you have to assign a common name or class or indivdual id.

You can't assign same id to all elements.

Here i used name attribute

var myButton = document.getElementsByName('dynamic');
var myInput = document.getElementsByName('viewPass');
myButton.forEach(function(element, index){
  element.onclick = function(){
     'use strict';

      if (myInput[index].type == 'password') {
          myInput[index].setAttribute('type', 'text');
          element.firstChild.textContent = 'Hide';
          element.firstChild.className = "";

      } else {
           myInput[index].setAttribute('type', 'password');
           element.firstChild.textContent = '';
            element.firstChild.className = "glyphicon glyphicon-eye-open";
      }
  }
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<td data-title="Password">
<input name="viewPass" type="password" value="abcd" readonly/></td>


<button type="button" id="" class="btn btn-default" name="dynamic"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></button>
<br>
<td data-title="Password">
<input name="viewPass" type="password" value="watha" readonly/></td>

<button type="button" id="" class="btn btn-default" name="dynamic"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></button>
<br>

<td data-title="Password">
<input name="viewPass" type="password" value="xyz" readonly/></td>

<button type="button" id="" class="btn btn-default" name="dynamic"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></button>

Upvotes: 3

Mihir Bhende
Mihir Bhende

Reputation: 9045

Basically you need to update the element so that next time you can check if its shown or hidden. You can use custom attribute like state. 

var myButton = document.getElementById('viewPswd'),
  myInput = document.getElementById('viewPass');
  myButton.onclick = function () {

      'use strict';
            if(this.getAttribute('state') == 'hidden'){
          myInput.setAttribute('type', 'text');
          this.textContent = 'Hide';
          this.setAttribute('state', 'shown');

      } else {
           myInput.setAttribute('type', 'password');
                    this.setAttribute('state', 'hidden');
          this.textContent = 'Show';
      }
  }

PFB working example for you : https://jsfiddle.net/8mfhpy2q/

Note that this will work for one button per page as we are using ID attribute here. If there are multiple password fields and buttons, this will be different.

Upvotes: 0

Related Questions