Afficher masquer en JS

Version imprimable

Bonjour à tous,

J'ai recupéré un bout de code pour afficher/masquer un mot de passe Cela ne fonctionne pas. (Il faut dire je suis pas très doué en JS ... lol)
SI je pouvais savoir savoir ou est mon erreur et comment corriger ?
Par avance merci

Je vous met le bout de code partie du formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
<div class="form-group">
                    <label class="form-label"><span>*</span> Mot de passe</label>    
                    <input type="password" id="mdp" name="password" placeholder="Mot de passe" class="form-input <?php if(isset($errors['password'])): ?> <?= $erreur ?> <?php endif ?>" value="<?=  $_POST['password'] ?? '' ?>" />                     
                        <i class="fa-regular fa-eye"></i>                
                </div>
 
                 <div class="form-group">  
                     <label class="form-label"> <span>*</span> Confirmez le mot de passe</label>   
                     <input type="password" id="mdp2" name="password_confirm" placeholder="Confirmez le mot de passe" class="form-input <?php if(isset($errors['password_confirm'])): ?> <?= $erreur ?> <?php endif ?>" value="<?=  $_POST['password_confirm'] ?? '' ?>" />
                        <i class="fa-regular fa-eye"></i>   
                </div>

Et le bout de code JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
    let input = document.querySelector('.form-group input');    
    let show = document.querySelector('.form-group i');
 
    show.onclick = function(){
        if(input.type === "password"){
            input.type = "text";
            show.classList.add('active');
        }else{
            input.type = "password";
            show.classList.remove('active');
        }
    }

Pour le CSS concernant la balise i :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.form-group{    
    display: flex;
    flex-direction: column;
    padding: 10px;
    width: 100%;
    position: relative;
 
& i{
    position: absolute;
    color: rgb(82, 78, 129);
    top:58px;
    right: 20px;
    font-size: 130%;
    cursor: pointer;
}
 
& i.active::before{
    content:'\f070';
}

Salut gesualda,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
        .form-group {
            display: grid;
            padding: 10px;
            column-gap: 16px;
            grid-auto-columns: max-content;
            grid-template-columns: 200px auto auto;
        }
 
        label {
            text-align: right;
        }
 
        i {
            color: rgb(82, 78, 129);
            font-size: 130%;
            cursor: pointer;
            border: 1px solid gray;
            width: max-content;
 
        }
 
        i.active::before {
            content: '\f070';
        }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
        let inputS = document.querySelectorAll('.form-group .form-input'),
            eyeS = document.querySelectorAll('.form-group i')
 
        eyeS.forEach((eye, index) => {
            eye.onclick = function () {
                inputS[index].type === "password" ?
                    [inputS[index].type = "text",
                    eye.classList.add('active')] :
                    [inputS[index].type = "password",
                    eye.classList.remove('active')]
            }
        })

14/03/2024, 11h50
gesualda

Hello ASCIIDEFOND

Tout d'abord merci de m'avoir porter une réponse. Alors je suis un peu dans l’incompréhension du résultat. Je m'explique:

Le code fonctionne à merveille si je recopie le formulaire sans php, dans une page html, tout fonctionne.

Dès que j'utilise mon formulaire sur ma page php, l’icône change bien, mais c'est comme si le code JS ne transformait pas en "text". Les caractères du "password" ne sont pas visible. (Etrange) !

Si tu as une idée, bien sur, je suis preneur.
Merci

PS : je viens de recréer le formulaire uniquement en html, cela ne fonctionne pas non plus. lol 8O8O
14/03/2024, 16h53
ASCIIDEFOND

Citation:

Envoyé par gesualda

...PS : je viens de recréer le formulaire uniquement en html, cela ne fonctionne pas non plus. lol 8O8O

Tu peux nous montrer ce code HTML ?

D'accord, du coup, je te mets toute la page.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
 
    <link rel="stylesheet" href="../css/adminCSS.css" />
    <title>Administration Pizzeria</title>
</head>
 
<body>
 
    <div class="container">
        <div class="cnt-gestion">
            <h1>Gestion administrative</h1>
            <h2 class="inscription">Ajout d'un membre</h2>
 
            <!-- Container du formulaire  -->
            <section class="cnt-box-form">
                <form action="" method="POST" class="form_register">
 
                    <div class="form-group">
                        <label class="form-label"><span>*</span> Nom</label>
                        <input type="text" name="nom" placeholder="Nom" class="form-input" />
                    </div>
 
                    <div class="form-group">
                        <label class="form-label"><span>*</span> Prénom</label>
                        <input type="text" name="prenom" placeholder="Prénom" class="form-input" />
                    </div>
 
                    <div class="form-group">
                        <label class="form-label"><span>*</span> Email</label>
                        <input type="text" name="email" placeholder="Email" class="form-input" />
                    </div>
 
                    <div class="form-group">
                        <label class="form-label"><span>*</span> Mot de passe</label>
                        <input type="password" name="password" placeholder="Mot de passe" class="form-input" />
                        <i class="fa-regular fa-eye"></i>
                    </div>
 
                    <div class="form-group">  
                     <label class="form-label"> <span>*</span> Confirmez le mot de passe</label>   
                     <input type="password" name="password_confirm" placeholder="Confirmez le mot de passe" id="pwd2" class="form-input" />
                        <i class=" fa-regular fa-eye"></i>   
                    </div>
 
                    <!-- <div class="form-group">
                        <label class="select_lab"> <span>*</span> Selectionnez le status</label>
                        <select name="status" class="form-input">
 
                        </select>
                    </div> -->
                    <button type="submit" class="form-btn-add" name="ajout">Ajouter le membre</button>
                </form>
 
            </section>
        </div>
    </div>
 
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"> </script>
    <script src="jquery.js"></script>
    <script type="text/javascript">
        let inputS = document.querySelectorAll('.form-group .form-input'),
            eyeS = document.querySelectorAll('.form-group i')
 
        eyeS.forEach((eye, index) => {
            eye.onclick = function () {
                inputS[index].type == "password" ?
                    [inputS[index].type = "text",
                    eye.classList.add('active')] :
                    [inputS[index].type = "password",
                    eye.classList.remove('active')]                
            }
        })
    </script>
</body>
</html>

Sur ton premier code il n'y avait que deux champs, il est normal que le script ne fonctionne pas avec quatre champs.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
        eyeS = document.querySelectorAll('.form-group i')
 
        eyeS.forEach((eye, index) => {
            eye.onclick = function () {
                let inputS = eye.previousElementSibling // On sélectionne la balise <input> se trouvant avant la balise <i>
                inputS.type === "password" ?
                    [inputS.type = "text",
                    eye.classList.add('active')] :
                    [inputS.type = "password",
                    eye.classList.remove('active')]
            }
        })

14/03/2024, 20h47
gesualda

ASCIIDEFOND, merci beaucoup d'avoir passer du temps à m'aider.

Pour le formulaire, je comprends bien, mais j'ai précisé que c'était un extrait du formulaire.
En tous les cas, j'ai noté ce qui se passait du coté du code. cela a l'air passionnant.

Je pense que je vais m'interresser un peu plus à ce language.
J'ai en effet, testé la correction. Ca marche nikel.

Bonne soirée et merci encore
JLuc