IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Faire disparaitre des inputs


Sujet :

JavaScript

  1. #1
    Membre du Club
    Homme Profil pro
    Inscrit en
    mars 2013
    Messages
    137
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : mars 2013
    Messages : 137
    Points : 50
    Points
    50
    Par défaut Faire disparaitre des inputs
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 926
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 926
    Points : 65 273
    Points
    65 273
    Billets dans le blog
    1
    Par défaut
    Avec une class css

    et tu ajoutes cette classe à tes inputs que tu veux cacher
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  3. #3
    Membre du Club
    Homme Profil pro
    Inscrit en
    mars 2013
    Messages
    137
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : mars 2013
    Messages : 137
    Points : 50
    Points
    50
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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

Discussions similaires

  1. Faire disparaitre des utilisateurs fantômes
    Par olaxius dans le forum AIX
    Réponses: 0
    Dernier message: 24/09/2009, 11h34
  2. Faire disparaitre des objets
    Par mah17 dans le forum Ogre
    Réponses: 15
    Dernier message: 23/06/2008, 15h33
  3. Faire disparaitre des propriétés publiques
    Par Crystal Noir dans le forum VB.NET
    Réponses: 13
    Dernier message: 05/12/2007, 14h41
  4. Réponses: 4
    Dernier message: 25/04/2007, 16h23
  5. Faire "disparaitre" des boutons
    Par kevinf dans le forum Général JavaScript
    Réponses: 17
    Dernier message: 06/03/2007, 14h32

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo