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

AliasDmc

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

Découvrez les Css avec la zonecss.fr

Terry-Bogard

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().

AliasDmc

23 juin 2019 à 10:55:27

Bonjour Terry-Bogard,

Je t'ai fait un autre exemple dans bind

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

Découvrez les Css avec la zonecss.fr

Terry-Bogard

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

AliasDmc

24 juin 2019 à 18:29:31

Bonjour Terry-Bogard,

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

Découvrez les Css avec la zonecss.fr