Faire disparaitre des inputs

Version imprimable

Bonjour à tous,

Je travail sur un projet et je but sur un problème.
J'ai un formulaire et j'ai des champs a cacher en fonction d'un sélecteur.
Je ne sais pas comment faire, si quelqu'un sur le forum sais comment faire pourrait-il m'aider ?

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
83
84
85
86
87
88
89
<form action="<?=htmlspecialchars($_SERVER['PHP_SELF'])?>" method="post">
<!-- bouton radio Civilite Nom et prenom -->
    <div class="container">
        <div class="row d-flex justify-content-center align-items-center">
 
            <div class="col-5 col-lg-2 offset-lg-0 mb-3">
                <select name="liens"
                id="liens" 
                class="form-control">
                        <option value="">Liens *</option>
                        <?php foreach(ARRAY_LIENS as $value):?>
                        <option value="<?=$value?>" <?=$value==$liens ? 'selected' : ''?> ><?=$value?></option>
                        <?php endforeach?>
                </select>
                        <?= htmlentities($error['liens'] ?? '', ENT_QUOTES, 'UTF-8')?>
            </div>
 
            <div class="col-5 col-lg-2 d-flex mb-3 texteFond">
                <div class="form-check me-2">
                    <input class="form-check-input"
                    type="radio"
                    value="1"
                    name="civility"
                    id="civilityO"
                    <?= (!empty($civility) && $civility == "1") ?  'checked' : '' ?>>
                    <label class="form-check-label" for="civility0">Mme</label>
                </div>
 
                <div class="form-check me-2">
                    <input class="form-check-input"
                    type="radio"
                    value="2"
                    name="civility"
                    id="civility1"
                    <?= (!empty($civility) && $civility == "2") ?  'checked' : '' ?>>
                    <label class="form-check-label" for="civility1">Mlle</label>
                </div>
 
                <div class="form-check">
                    <input class="form-check-input"
                    type="radio"
                    value="3"
                    name="civility" 
                    required
                    id="civility2"
                    <?= (!empty($civility) && $civility == "3") ?  'checked' : '' ?>>
                    <label class="form-check-label" for="civility2">Mr</label>
                </div>
                <div class="error"><br><?= htmlentities($error['civility'] ?? '', ENT_QUOTES, 'UTF-8')?></div>
            </div>
 
 
            <div class="col-10 col-lg-4">
                <div class="form-floating mb-3">
                    <input type="text"
                    class="form-control"
                    minlenght ="2"
                    maxlength="25"
                    name="name"
                    id="name"
                    placeholder="Votre nom"
                    pattern="<?=REGEX_NO_NUMBER?>"
                    required
                    value="<?= htmlentities($_POST['name'] ?? '', ENT_QUOTES, 'UTF-8')?>">
                    <div class="error"><?= htmlentities($error['name'] ?? '', ENT_QUOTES, 'UTF-8')?></div>
                    <label for="name">Nom *</label>
                </div>
            </div>
 
            <div class="col-10 col-lg-4 offset-lg-0">
                <div class="form-floating mb-3">
                    <input type="text"
                    class="form-control"
                    minlenght ="2"
                    maxlength="25"
                    name="firstname"
                    id="firstname"
                    placeholder="Votre prénom"
                    pattern="<?=REGEX_NO_NUMBER?>"
                    required
                    value="<?= htmlentities($_POST['firstname'] ?? '', ENT_QUOTES, 'UTF-8')?>">
                    <div class="error"><?= htmlentities($error['firstname'] ?? '', ENT_QUOTES, 'UTF-8')?></div>
                    <label for="firstname">Prénom *</label>
                </div>
            </div>
 
        </div>
    </div>
<!-- Fin nom et prenom -->

Merci par avance de vos retours.

@+ filou

26/07/2021, 16h10
SpaceFrog

Avec une class css

Code:

.d-none{display:none;}

et tu ajoutes cette classe à tes inputs que tu veux cacher

Je reviens vers vous car j'ai un autre soucis, j'ai du modifier mon fichier JS par rapport a mon select car quand j'arrive il est sur la valeur par defaut (liens *)
Je souhaiterai que quand j'arrive sur la page, le select est sur liens*, de se fait cela affiche pas le formulaire ou masque les champs.
Ensuite en sélectionnant représentant legal1 tout les champs par contre un autre que certain champs.

L'autre soucis que je rencontre est que quand j'actualise quand le sélecteur est sur représentant légal 1 il me fait comme ci j'étais sur un autre.
Je sais pas si je suis clair dans mon explication.
J'ai mis des id sur mais div.
Voici mon code js :

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
// Fonction pour faire disparaitre input formulaire representant legal
const select = document.querySelector('select');
 
const labelcity = document.querySelector('#labelCivility');
const labelName = document.querySelector('#labelName');
const labelFirstname = document.querySelector('#labelFirstname');
const labelAdress = document.querySelector('#labelAdress');
const labelBirthday = document.querySelector('#labelBirthday');
const labelBirthdayMail = document.querySelector('#labelBirthdayMail');
const labelTels = document.querySelector('#labelTels');
const labelMail = document.querySelector('#labelMail');
const labelMailConf = document.querySelector('#labelMailConf');
const labelTelHome = document.querySelector('#labelTelHome');
const labelTelWork = document.querySelector('#labelTelWork');
const labelSalary = document.querySelector('#labelSalary');
 
const falcultaty = [labelBirthday,labelMail,labelMailConf,labelTelHome,labelTelWork,labelSalary];
//const falcultaty2 = [labelCivility,labelName,labelFirstname,labelAdress,labelBirthdayMail,labelTels];
 
    document.addEventListener('DOMContentLoaded', function(event) {
        var selectedOption = event.target.value;
        if (selectedOption != "Representant legal 1"){
            falcultaty.forEach(element=>{
                if(element) element.classList.add("d-none");
            })
        } else {
            falcultaty.forEach(element=>{
                if(element) element.classList.remove("d-none");
            })
        }
    });
 
    select.onchange=(event)=>{
        var selectedOption = event.target.value;
        console.log(event.target.value);
        if (selectedOption != "Representant legal 1"){
            falcultaty.forEach(element=>{
                if(element) element.classList.add("d-none");
            })
        } else {
            falcultaty.forEach(element=>{
                if(element) element.classList.remove("d-none");
            })
        }
    };
 
    // document.addEventListener('DOMContentLoaded', function(event) {
    //     var selectedOption = event.target.value;
    //     if (selectedOption = "Liens *"){
    //         falcultaty2.forEach(element=>{
    //             if(element) element.classList.add("d-none");
    //         })
    //     } else {
    //         falcultaty2.forEach(element=>{
    //             if(element) element.classList.remove("d-none");
    //         })
    //     }
    // });
 
    // select.onchange=(event)=>{
    //     var selectedOption = event.target.value;
    //     console.log(event.target.value);
    //     if (selectedOption = "Liens *"){
    //         falcultaty2.forEach(element=>{
    //             if(element) element.classList.add("d-none");
    //         })
    //     } else {
    //         falcultaty2.forEach(element=>{
    //             if(element) element.classList.remove("d-none");
    //         })
    //     }
    // };
 
// Fin fonction pour faire disparaitre input formulaire representant legal

Merci pour votre aide
@+ Filou