Partage
  • Partager sur Facebook
  • Partager sur Twitter

form: pourcentage de remplissage

Sujet résolu
    18 juin 2019 à 23:05:54

    Bonjour,

    J'aimerais indiquer la progression de remplissage de formulaire. Mon script ne marche pas du tout :

    <!DOCTYPE html>
    <html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Pourcentage rempli</title>
    </head>
    <body>
        <form method="post">
            Genre : <label for="genre_m"><input name="genre" value="men" type="radio" id="genre_m">Monsieur</label>
            <label for="genre_f"><input name="genre" value="women" type="radio" id="genre_f">Madame</label><br>
    
            <label for="name">Nom : <input type="text" name="name" id="name"></label>
    
            <label for="forname">Prénom : <input type="text" name="forname" id="forname"></label><br>
    
            <label for="adress">Adresse : <input type="text" name="adress" id="adress"></label><br>
    
            <label for="zip">Code postal : <input type="text" name="zip" id="zip" maxlength="5"></label><br>
    
            <button id="button">Envoyer</button>
        </form>
    
    
        <p>Formulaire completé à <span id="out">0</span> %</p>
    
    
        <script>
            if (document.form.genre.value !== "") {
                add();
            }
            if (document.form.name.value !== "") {
                add();
            }
            if (document.form.forname.value !== "") {
                add();
            }
            if (document.form.adress.value !== "") {
                add();
            }
            if (document.form.zip.value !== "") {
                add();
            }
    
            function add() {
                var percent = parseInt(document.getElementById("out").textContent, 10);
                percent += 20;
                document.getElementById("out").innerText = percent;
            }
    
        </script>
    </body>
    </html>


    Je pense que je n'utilise pas du tout la bonne méthode.

    -
    Edité par Terry-Bogard 18 juin 2019 à 23:08:59

    • Partager sur Facebook
    • Partager sur Twitter
      20 juin 2019 à 19:07:25

      Bonjour Terry-Bogard,

      Un exemple mais on peut je pense le faire différent avoir

      https://codepen.io/Zonecss/pen/QXKdGY

      • Partager sur Facebook
      • Partager sur Twitter
      Découvrez les Css avec la zonecss.fr
        21 juin 2019 à 0:26:45

        Merci beaucoup pour ton aide. Celui-là était vraiment dur.

        J'ai pas bien compris ce qu'il faut mettre dans le tableau "aChamp". Ce sont les id ?

        J'ai beaucoup de mal à comprendre bind().

        • Partager sur Facebook
        • Partager sur Twitter
          23 juin 2019 à 10:55:27

          Bonjour Terry-Bogard,

          Je t'ai fait un autre exemple dans bind

          https://codepen.io/Zonecss/pen/ewWBYZ

          • Partager sur Facebook
          • Partager sur Twitter
          Découvrez les Css avec la zonecss.fr
            23 juin 2019 à 17:34:27

            Merci, cet exemple est bien plus facile à comprendre !

            J'arrive à le refaire en ajoutant un input de type file.

            Par contre, je n'arrive pas pour le <select>. Voici mon code :

            <!DOCTYPE html>
            <html lang="fr">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <title>Pourcentage rempli</title>
                <style>
                    .saisie {
                        margin-bottom:5px;
                    }
                </style>
            </head>
            
            <body>
                <form method="post">
            
                    Genre : <label for="genre_m"><input name="genre" value="men" type="radio" id="genre_m" class="saisie">Monsieur</label>
                    <label for="genre_f"><input name="genre" value="women" type="radio" id="genre_f" class="saisie">Madame</label>
                    <label for="genre_o"><input name="genre" value="other" type="radio" id="genre_o" class="saisie">Autre</label><br>
            
                    <label for="name">Nom : <input type="text" name="name" id="name" class="saisie"></label>
            
                    <label for="forname">Prénom : <input type="text" name="forname" id="forname" class="saisie"></label><br>
            
                    <label for="photo">Photo : <input type="file" name="photo" id="photo" class="saisie"></label><br>
            
                    <label for="adress">Adresse : <input type="text" name="adress" id="adress" class="saisie"></label><br>
            
                    <label for="zip">Code postal : <input type="text" name="zip" id="zip" maxlength="5" class="saisie"></label><br>
            
                    <label for="country">Pays :
                    <select name="country" id="country" class="saisie">
                        <option value="">Votre pays</option>
                        <option value="france">France</option>
                        <option value="belgique">Belgique</option>
                        <option value="luxembourg">Luxembourg</option>
                    </select>
                    </label><br>
            
            
                    <button id="button">Envoyer</button>
                </form>
            
            
                <p>Formulaire completé à <span id="out">0</span> %</p>
            
            
                <script>
            
                    function checkValue(event) {
            
                        var rempli = 0,
                            pourcent = 0,
                            champs = event.currentTarget.form.getElementsByClassName("saisie");
            
                            console.log(champs.length);
            
                        for (let i=0; i<champs.length; i++) {
            
                            let champ = champs[i];
            
                            if (champ.type == "radio" && champ.checked) {
                                rempli++;
                            }
            
                            else if (champ.type == "text" && champ.value != "") {
                                rempli++;
                            }
            
                            else if (champ.type == "file" && champ.value != "") {
                                rempli++;
                            }
            
                            else if (champ.select && champ.value != "") {
                                rempli++;
                            }
            
                        }
            
                        console.log(rempli);
            
                        pourcent = Math.round( rempli*100 / (champs.length-2) ); // -2, car le genre possède 3 cases pour la même chose. Math.round() arrondit à l’entier le plus proche
            
                        console.log(pourcent);
            
                        document.getElementById("out").innerText = pourcent; // Affichage du pourcentage
            
                    }
            
            
            
            
                    var champs = document.getElementsByClassName("saisie");
                    
                    for (let i=0; i<champs.length; i++) {
                        champs[i].addEventListener('input', checkValue);
                    }
            
                </script>
            </body>
            </html>



            -
            Edité par Terry-Bogard 23 juin 2019 à 18:14:53

            • Partager sur Facebook
            • Partager sur Twitter
              24 juin 2019 à 18:29:31

              Bonjour Terry-Bogard,

               else if (champ.tagName =="SELECT" && champ.selectedIndex != 0) {
                 rempli++;
              }



              • Partager sur Facebook
              • Partager sur Twitter
              Découvrez les Css avec la zonecss.fr

              form: pourcentage de remplissage

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              • Editeur
              • Markdown