Lecture JSON et pré-coché case et bouton d'un formulaire

**Cisman** · 16/11/2019, 00h26

Bonjour,

J'ai une petite application météo, qui me permet de sélectionner les informations et les unités de mesure à afficher.

J'aimerai lorsque je vais sur mon formulaire, pré-coché les cases et bouton de mon formulaire après le lecture de mon fichier json.

Voici mes fichiers:

mon formulaire config.html

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
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="fr">
 
<head>
    <meta charset="UTF-8">
    <title>View Choice</title>
    <link rel="stylesheet" href="css/styleopacity.css" type="text/css">
 
</head>
 
<body >
    <div id="background_opacity">
        <form name="monFormulaire" method="post" action="traitement.php"><!--Début de mon formulaire-->
            <h3><u>Veuillez choisir les options que vous désirez voir</u></h3>
 
            <div id="contener"><!--mon contener-->
                <nav class="element"><!--première box-->
                     <h4>Navigation</h4>
                         <ul>
                            <li><a href="index.html">Page d'accueil</a></li>
                        </ul>
                </nav>
                <div class="element"><!--troisième box-->
                    <h4><u>Unités de mesure: </u></h4>
                    <ul><!--Les boutons radio-->
                        <li><b>Degré:</b> 
                            <ul>
                                <li><input type="radio" name="degre" value="0" id="celcius" type="checkbox" checked/> <label for="celcius">Celcius </label></li>
                                <li><input type="radio" name="degre" value="1" id="fahrenheit"/> <label for="fahrenheit">Fahrenheit</label></li>
                                <li><input type="radio" name="degre" value="2" id="kelvin"/> <label for="kelvin">Kelvin</label></li>
                            </ul>   
                        </li>
                        <li><b>Vitesse du vent:</b> 
                                <ul>
                                    <li><input type="radio" name="vent" value="0" id="m/s" type="checkbox" checked/> <label for="m/s">m/s</label></li>
                                    <li><input type="radio" name="vent" value="1" id="Km/h"/> <label for="Km/h">Km/h</label></li>
                                    <li><input type="radio" name="vent" value="2" id="kts"/> <label for="kts">kts</label> </li>
                                </ul>       
                        </li>
                        <li><b>Visibilité en:</b> 
                            <ul>
                                <li><input type="radio" name="visib" value="0" id="m" type="checkbox" checked/> <label for="m">m</label></li>
                                <li><input type="radio" name="visib" value="1" id="Km"/> <label for="Km">Km</label></li>
                            </ul>       
                         </li>
                         <li><b>Pression en:</b> 
                            <ul>
                                <li><input type="radio" name="press" value="0" id="hPa" type="checkbox" checked/> <label for="hPa">hPa</label></li>
                                <li><input type="radio" name="press" value="1" id="bar"/> <label for="bar">bar</label></li>
                            </ul>       
                         </li>
                    </ul>
                </div>
                <div class="element"><!--quatrième box-->
                    <h4><b><u>Que voulez vous voir: </u></b></h4>
                    <ul><!--les cases à cocher-->
                        <li>Température<input type="checkbox" name="Temperature" value="1"/></li>
                        <li>Couverture nuageuse<input type="checkbox" name="Nuage" value="1"/></li>
                        <li>Vitesse du vent<input type="checkbox" name="VitesseVent" value="1"/></li>
                        <li>Pression<input type="checkbox" name="Pression" value="1"/></li>
                        <li>Visibilité<input type="checkbox" name="Visibilité" value="1"/></li>
                        <li>Description<input type="checkbox" name="Description" value="1"/></li>
                        <!--<li>Pluie<input type="checkbox" name="Pluie"/></li>-->
                        <!--<li>Lever du soleil<input type="checkbox" name="Lever du soleil"/></li>-->
                        <!--<li>Coucher du soleil<input type="checkbox" name="Coucher du soleil"/></li>-->
                        <!--<li>Durée du jour<input type="checkbox" name="Durée du jour"/></li>-->
                        <!--<li>Lever de la lune<input type="checkbox" name="Lever de la lune"/></li>-->
                        <!--<li>Coucher de la lune<input type="checkbox" name="Coucher de la lune"/></li>-->
                        <!--<li>Phases de la lune<input type="checkbox" name="Phases de la lune"/></li>-->
                        <!--<li>Heure des marées<input type="checkbox" name="Heure des marées"/></li>-->
                    </ul>
                </div>
            </div>
            <p class="align"><input type="submit" value="Enter" /><input type="reset" value="annuler"/></p>
        </form>
 
        <hr>
 
        <footer>	
            <p class="align-right">&copy; F.&nbsp;NICOLAY</p>
        </footer>
    </div>
    <script src="jquery-3.4.1.min.js"></script> 
    <script src="configForm.js"></script>
 
 
    <!--tentative de coché les cases du formulaire avec lescture json infructueuse-->
    <script>$(document).ready(function (){
        configForm();
    });
    </script>
 
</body>
 
</html>

mon fichier data.json

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

[{"temp":"1","nuage":"1","vitesseVent":"1","pression":"1","visib":"1","description":0,"degre":"2","vent":"0","uniteVisib":"1","unitePression":"0"}]

mon fichier configForm.js, qui va lire le json et est censé coché ou non les cases et boutons de mon formulaire.

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
//tentative pour afficher les cases cochées, mais sans succès.
function configForm(callback) {
    $.getJSON("data.json", function (data) {
 
        if (data["temp"] == 1) {
            $("#Temperature").prop('checked', true);
        } else {
            $("#Temperature").prop('checked', false);
        }
        if (data["nuage"] == 1) {
            $("#Nuage").prop('checked', true);
        } else {
            $("#Nuage").prop('checked', false);
        }
        if (data["vitesseVent"] == 1) {
            $("#VitesseVent").prop('checked', true);
        } else {
            $("#VitesseVent").prop('checked', false);
        }
        if (data["pression"] == 1) {
            $("#Pression").prop('checked', true);
        } else {
            $("#Pression").prop('checked', false);
        }
        if (data["visib"] == 1) {
            $("#Visibilité").prop('checked', true);
        } else {
            $("#Visibilité").prop('checked', false);
        }
        if (data["description"] == 1) {
            $("#Description").prop('checked', true);
        } else {
            $("#Description").prop('checked', false);
        }
        if (data["degre"] == 2) {
            $("#degre").val("2");
        } else if (data["degre"] == 1) {
            $("#formdegreemp").val("1");
        } else if (data["degre"] == 0) {
            $("#degre").val("0");
        }
        if (data["vent"]== 1) {
            $("#vent").val("1");
        } else if (data["vent"] == 0) {
            $("#vent").val("0");
        }
        if (data["uniteVisib"]== 1) {
            $("#visib").val("1");
        } else if (data["uniteVisib"] == 0) {
            $("#visib").val("0");
        }
        if (data["unitePression"]== 1) {
            $("#press").val("1");
        } else if (data["unitePression"] == 0) {
            $("#press").val("0");
        }
        callback();
    });
}

**Toufik83** · 16/11/2019, 11h24

Salut,

1- Tu n'as pas ajouter des id aux cases à cocher se trouvant dans le deuxième <div class="element">, il n'y a que des name.
2- Quand tu fais un console.log de data["temp"], ça te retourne bien 1 et pas undefined ?

Solution proposée :

Si on met des names identiques aux noms de propriétés json :

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
 
<!--Les boutons radio-->
<ul class="ulParent"><!-- On ajoute une class ulParent pour les deux ul -->
  <li><b>Degré:</b>
    <ul>
      <li><input type="radio" name="degre" value="0"  /> <label >Celcius </label></li>
      <li><input type="radio" name="degre" value="1"  /> <label >Fahrenheit</label></li>
      <li><input type="radio" name="degre" value="2"  /> <label >Kelvin</label></li>
    </ul>
  </li>
  <li><b>Vitesse du vent:</b>
    <ul>
      <li><input type="radio" name="vent" value="0"  /> <label >m/s</label></li>
      <li><input type="radio" name="vent" value="1"  /> <label >Km/h</label></li>
      <li><input type="radio" name="vent" value="2"  /> <label >kts</label> </li>
    </ul>
  </li>
  <li><b>Visibilité en:</b>
    <ul>
      <li><input type="radio" name="uniteVisib" value="0"  /> <label >m</label></li>
      <li><input type="radio" name="uniteVisib" value="1"  /> <label >Km</label></li>
    </ul>
  </li>
  <li><b>Pression en:</b>
    <ul>
      <li><input type="radio" name="unitePression" value="0"  /> <label >hPa</label></li>
      <li><input type="radio" name="unitePression" value="1"  /> <label >bar</label></li>
    </ul>
  </li>
</ul>
 
<!--les cases à cocher-->
<ul class="ulParent"><!-- On ajoute une class ulParent pour les deux ul -->
  <li>Température<input type="checkbox" name="temp" /></li>
  <li>Couverture nuageuse<input type="checkbox" name="nuage" /></li>
  <li>Vitesse du vent<input type="checkbox" name="vitesseVent" /></li>
  <li>Pression<input type="checkbox" name="pression" /></li>
  <li>Visibilité<input type="checkbox" name="visib" /></li>
  <li>Description<input type="checkbox" name="description" /></li>
</ul>

Puis après il ne reste plus qu'à parcourir les éléments pour récupérer la valeur de la bonne propriété json selon le name :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
var type, name;
$('.ulParent [type="checkbox"],.ulParent [type="radio"]')
  .each(function(index, elem) {
    type = $(elem).attr('type');
    name = $(elem).attr('name');
    if (type == 'checkbox') 
    	$(elem).prop("checked", data[0][name] == 1 ? true : false);
    else if (type == 'radio') 
    	$(elem).closest('ul')
      .find('[name="' + name + '"][value="' + data[0][name] + '"]')
      .prop('checked', true);
  });

Ii est possible aussi d'inverser la méthode, c'est à dire parcourir l'objet lui même pour arriver aux bons inputs.

**Cisman** · 16/11/2019, 17h56

2- Quand tu fais un console.log de data["temp"], ça te retourne bien 1 et pas undefined ?

la valeur est undefined.

**Toufik83** · 16/11/2019, 17h58

Donc c'est data[0]["temp"] ou data[0].temp, les deux fonctionnent.

**Cisman** · 16/11/2019, 18h46

Comme ceci, ça me renvoi bien les bonnes valeur, mais ne coche toujours pas mes checkbox et bouton radio.

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
75
76
77
78
//tentative pour afficher les cases cochées, mais sans succès.
 
function configForm() {
    $.getJSON("data.json", function (data) {
        console.log(data[0].temp);
        console.log(data[0].nuage);
        console.log(data[0].vitesseVent);
        console.log(data[0].pression);
        console.log(data[0].visib);
        console.log(data[0].description);
        console.log(data[0].degre);
        console.log(data[0].vent);
        console.log(data[0].uniteVisib);
        console.log(data[0].unitePression);
 
        if (data[0].temp == 1) {
            $("#Temperature").prop('checked', true);
        } else {
            $("#Temperature").prop('checked', false);
        }
 
        if (data[0].nuage == 1) {
            $("#Nuage").prop('checked', true);
        } else {
            $("#Nuage").prop('checked', false);
        }
 
        if (data[0].vitesseVent == 1) {
            $("#VitesseVent").prop('checked', true);
        } else {
            $("#VitesseVent").prop('checked', false);
        }
 
        if (data[0].pression == 1) {
            $("#Pression").prop('checked', true);
        } else {
            $("#Pression").prop('checked', false);
        }
 
        if (data[0].visib== 1) {
            $("#Visibilité").prop('checked', true);
        } else {
            $("#Visibilité").prop('checked', false);
        }
 
        if (data[0].description == 1) {
            $("#Description").prop('checked', true);
        } else {
            $("#Description").prop('checked', false);
        }
 
        if (data[0].degre == 2) {
            $("#degre").val("2");
        } else if (data[0].degre == 1) {
            $("#formdegreemp").val("1");
        } else if (data[0].degre == 0) {
            $("#degre").val("0");
        }
 
        if (data[0].vent == 1) {
            $("#vent").val("1");
        } else if (data[0].vent == 0) {
            $("#vent").val("0");
        }
 
        if (data[0].uniteVisib == 1) {
            $("#visib").val("1");
        } else if (data[0].uniteVisib == 0) {
            $("#visib").val("0");
        }
 
        if (data[0].unitePression == 1) {
            $("#press").val("1");
        } else if (data[0].unitePression == 0) {
            $("#press").val("0");
        }
    }, "json");
}

Un autre soucis, sur chrome, mes sélections dans mon formulaire se font directement.
par contre sur chrome ou firefox, je dois constamment effacer les données de navigation et rafraichir la page pour voir les choix de mon formulaire.

**Toufik83** · 16/11/2019, 18h51

Pourquoi tu n'as pas testé la solution de $.each que je t'ai posté au dessus ?

On n'utilise pas .val(), ni pour les checkbox ni pour les radio.

Un autre soucis, sur chrome, mes sélections dans mon formulaire se font directement.
par contre sur chrome ou firefox, je dois constamment effacer les données de navigation et rafraichir la page pour voir les choix de mon formulaire.

Je n'ai testé que sous chrome.

Lecture JSON et pré-coché case et bouton d'un formulaire

jQuery

Vue hybride

Discussions similaires

Partager

Partager