Jquery - Show Password when click on EYE icon in PHP+JS+JQ

PANKAJMAHADIK
May 1, 2023
227 views
1 vote
2 Answers

I have created one page in PHP where admin can see Password’s of all users.(Check below SS)
enter image description here
All rows are coming from DB (while loop)
Whenever i click on any Row’s EYE icon, it show’s only first rows password and not the row which i clicked on.

CODE :

<table id="example" class="table table-striped table-bordered margtbnone" style="width:100%">
<thead>
    <tr>
        <th>Employee ID.</th>
        <th>Employee Name</th>
        <th>Panel Password </th>
        <th>Employee Status</th>            
    </tr>
</thead>
<tbody>
<?php

$Allusers=mysqli_query($con,"select * from `users`  order by id asc");

while($users=mysqli_fetch_array($Allusers)){
    ?>
    <tr>
        
        <td><?php echo $users['id']; ?></td>
        <td><?php echo $users['full_name']; ?></td>
        <td>
                <input type="password" name="password"  id="id_password" value="<?php echo $users['password']; ?>" >
                <i class="far fa-eye" id="togglePassword" style="margin-left: -30px; cursor: pointer;"></i>
                  
        </td>
        <td><?php echo $users['status']; ?></td>
       
    </tr>
     <?php
        }

    ?>
    
</tbody>
</table>

<script>

const togglePassword = document.querySelector('#togglePassword');
const password = document.querySelector('#id_password');

  togglePassword.addEventListener('click', function (e) {
    // toggle the type attribute
    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    // toggle the eye slash icon
    this.classList.toggle('fa-eye-slash');
});
</script>

Can you suggest changes required for the above issue

Answers

Here’s what I came up with:

<table id="example" class="table table-striped table-bordered margtbnone" style="width:100%">
<thead>
    <tr>
        <th>Employee ID.</th>
        <th>Employee Name</th>
        <th>Panel Password </th>
        <th>Employee Status</th>            
    </tr>
</thead>
<tbody>
<?php

$Allusers=mysqli_query($con,"select * from `users`  order by id asc");
$i = 0; // For setting ids
while($users=mysqli_fetch_array($Allusers)){
   $i++;
?>
    <tr>
        
        <td><?php echo $users['id']; ?></td>
        <td><?php echo $users['full_name']; ?></td>
        <td>
                <input type="password" name="password"  id="id_password<?php echo $i ?>" value="<?php echo $users['password']; ?>" > <!-- echo $i to id -->
                <i class="far fa-eye" id="toggle_password<?php echo $i ?>" style="margin-left: -30px; cursor: pointer;" onclick="showPassword(<?php echo $i ?>)"></i> <!-- use $i for showPassword() function -->
                  
        </td>
        <td><?php echo $users['status']; ?></td>
       
    </tr>
     <?php
        }

    ?>
    
</tbody>
</table>

//const togglePassword = document.querySelector('#togglePassword');
//const password = document.querySelector('#id_password');

  //togglePassword.addEventListener('click', function (e) {
function showPassword(num){
    // toggle the type attribute
    password = document.querySelector(`#id_password${num}`);
    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    // toggle the eye slash icon
    document.querySelector(`#toggle_password${num}`).classList.toggle('fa-eye-slash');
}

So…

For each user, PHP increments $i (starting at zero)
That $i is then fed into the ids of the id_password and toggle_password elements
The event listener is changed to function showPassword that takes in a number to identify the elements’ ids (the $i).

Hope it works 🙂

You should not use the id attribute at all for your password input elements. Use a class attribute instead. Then the resulting generated HTML could look something like below:

document.querySelector("#example").addEventListener("click",ev=>{
 if(ev.target.classList.contains("fa-eye")){
  let inp=ev.target.previousElementSibling;
  inp.setAttribute("type",inp.type=="text"?"password":"text");
 }
});

.fa-eye {width:20px; cursor: pointer;}
input {width:60px;}
td:nth-child(3) {min-width:120px;}

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<table id="example" class="table table-striped table-bordered margtbnone">
<thead>
<tr>
    <th>Employee ID.</th>
    <th>Employee Name</th>
    <th>Panel Password </th>
    <th>Employee Status</th>            
</tr>
</thead>
<tbody>
<tr>
    <td>1</td>
    <td>Harry Potter</td>
    <td><input type="password" name="password" class="id_password" value="wingardium"><i class="fa fa-eye">view</i></td>
    <td>active</td>
</tr>
<tr>
    <td>2</td>
    <td>Ron Weasley</td>
    <td><input type="password" name="password" class="id_password" value="Leviosa"><i class="fa fa-eye">view</i></td>
    <td>active</td>
</tr>
<tr>
    <td>3</td>
    <td>Hermiony Granger</td>
    <td><input type="password" name="password" class="id_password" value="teebeedoo"><i class="fa fa-eye">view</i></td>
    <td>active</td>
</tr>
</tbody>
</table>

I wrote the click-event handler as a delegated event handler. This way you are free to dynamically add further rows to your table without having to think about adding the event listeners to each new input field.

( I could not quite get your font awesome characters to show up, but that is a separate issue. )

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – Show Password when click on EYE icon in PHP+JS+JQ

Answers