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.

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

je glisse ça dans ma fonction configForm?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
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);
  });

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

Pas directement dans la fonction, mais plutôt dans le callback de $.getJSON :

Code :

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

1
2
3
4
5
6
 
function configForm() {
    $.getJSON("data.json", function (data) {
    /* efface tout ton code, et glisse ce que je t'ai posté ici */
   },"json");
}

Et n'oubli pas d'attribuer la classe ulParent aux <ul> parent.

**Cisman** · 16/11/2019, 19h02

ça fonctionne pour les boutons radio, pas pour les checkbox.

**Toufik83** · 16/11/2019, 19h04

es-tu sûr que les names des checkbox sont identiques aux propriétés json ?

**Cisman** · 16/11/2019, 19h06

Non, je viens de m'en rendre compte.
Je corrige.

**Cisman** · 16/11/2019, 20h06

ça fonctionne, j'ai modifié aussi les noms dans traitement.php.

Par contre d'où pourrait venir le soucis que je dois constamment effacer les données de navigation et rafraichir la page pour voir les choix de mon formulaire,sur Firefox?

**Toufik83** · 16/11/2019, 21h21

Je viens de tester sous Firefox et sans $.getJSON et le script me semble fonctionner correctement.

Est-ce que ton fichier traitement.php modifie les valeurs de l'objet json lors de la soumission du formulaire ? si oui montre moi son code pour tester avec $.getJSON.

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

Oui, il modifie mon fichier data.json

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
<?php 
//$dataForm = array();
 
$dataForm = [
    'temp' => 0,
    'nuage' => 0,
    'vitesseVent' => 0,
    'pression' => 0,
    'visib' => 0,
    'description' => 0,
    'degre' => 0,
    'vent' => 0,
    'uniteVisib' => 0,
    'unitePression' => 0
];
 
//s'il y a quelque chose dans la valeur du champ
if (isset($_POST['temp'])) {
	$dataForm['temp'] = $_POST['temp'];//valeur du champ dans le tableau à l'index correspondant
}
if (isset($_POST['nuage'])) {
	$dataForm['nuage'] = $_POST['nuage'];
}
if (isset($_POST['vitesseVent'])) {
	$dataForm['vitesseVent'] = $_POST['vitesseVent'];
}
if (isset($_POST['pression'])) {
	$dataForm['pression'] = $_POST['pression'];
}
if (isset($_POST['visib'])) {
	$dataForm['visib'] = $_POST['visib'];
}
if (isset($_POST['description'])) {
	$dataForm['description'] = $_POST['description'];
}
 
$dataForm['degre'] = $_POST['degre'];
$dataForm['vent'] = $_POST['vent'];
$dataForm['uniteVisib'] = $_POST['uniteVisib'];
$dataForm['unitePression'] = $_POST['unitePression'];
 
$js[] = $dataForm;
 
$js = json_encode($js);//encodage $js en JSON
 
file_put_contents('data.json', $js);//enregistrement $js dans data.json
 
//var_dump(json_decode($js));//affiche le contenu du tableau
 
header("Refresh:1; url=index.html");//redirection vers page d'accueil après clic sur submit et un délais
?>

**Toufik83** · 16/11/2019, 21h42

Ok, il y a un truc très important que j'ai oublié de te le dire, si tu met un console.log("data :",data) dans $.getJSON, tu verras que les valeurs des checkbox cochés sont des "on" et pas 1.

Donc tu dois remplacer la partie du code

Code :

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

1
2
 
data[0][name] == 1

Par :

Code :

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

1
2
 
data[0][name] == 'on'

Ou bien gérer la valeur dans traitement.php et ne rien modifier dans le js , par exemple pour description :

Code php :

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

1
2
3
4
5
6
 
if (isset($_POST['description'])) {
	$dataForm['description'] = $_POST['description']=="on"?1:"n'importe quoi ici... ce bloc n'est jamais exécuté...";
        /* ou bien directement =1 */
        $dataForm['description'] =1;//parce que si la case n'est pas coché, le script n'entre jamais dans ce bloc 
}

**Cisman** · 16/11/2019, 22h16

Comme ça?

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
function configForm() {
  $.getJSON("data.json", function (data) {
    console.log("data :",data);
 
    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);
      });
  }, "json");
}

J'ai ce résultat dans la console.
Nom : erreur.PNG
Affichages : 433
Taille : 5,8 Ko

**Toufik83** · 16/11/2019, 22h37

Eh ben moi ça m'affiche des "on" quand je coche toutes les cases, que se soit sous chrome ou firefox c'est pareil.Pièce jointe 517908

C'est juste pour t'expliquer l'utilité de la ligne $dataForm['description'] = $_POST['description']=="on"?1:"ce bloc n'est jamais exécuté...";

**Cisman** · 16/11/2019, 23h00

Lol

Merci en tout cas du coup de main et des explications.

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

jQuery

Discussions similaires

Partager

Partager